2014-11-24 77 views
0

我正在使用angularFire并尝试使用$ add将表单中的数据保存到firebase。任何帮助将不胜感激。控制台记录所有工作,我能够在控制台中检索数据。对不起所有的代码...我想确保我提供了所有需要的材料。

app.js:

var creativeBillingApp = angular.module('creativeBillingApp', ['ngRoute', 'firebase']); 

    creativeBillingApp.constant('FIREBASE_URI', "https://XXXX.firebaseIO.com/"); 

    creativeBillingApp.controller('MainCtrl', ['$scope', 'groupsService', function($scope, groupsService, $firebase) { 

    console.log('Works') 


    $scope.newGroup = { 
    name: '', 
    status: '' 

    }; 

    $scope.addGroup = function(newGroup){ 

    console.log(newGroup); 

groupsService.addGroup(); 
    $scope.newGroup = { 
    name: '', 
    status: '' 

    }; 
}; 
$scope.updateGroup = function (id) { 
    groupsService.updateGroup(id); 
}; 

$scope.removeGroup = function(id) { 
    groupsService.removeGroup(id); 
}; 
}]); 




creativeBillingApp.factory('groupsService', ['$firebase', 'FIREBASE_URI', 
    function ($firebase, FIREBASE_URI) { 
    'use strict'; 
    var ref = new Firebase(FIREBASE_URI); 
    return $firebase(ref).$asArray(); 

var groups = $firebase(ref).$asArray(); 

var getGroups = function(){ 
    return groups; 
}; 

var addGroup = function (newGroup) { 
    console.log(newGroup) 
    groups.$add(newGroup); 
}; 

var updateGroup = function (id){ 
    groups.$save(id); 
}; 

var removeGroup = function (id) { 
    groups.$remove(id); 
}; 
return { 
    getGroups: getGroups, 
    addGroup: addGroup, 
    updateGroup: updateGroup, 
    removeGroup: removeGroup, 
} 

}]); 

的index.html:

  <form role="form" ng-submit="addGroup(newGroup)"> 
      <div class="form-group"> 
       <label for="groupName">Group Name</label> 
       <input type="text" class="form-control" id="groupName" ng-model="newGroup.name"> 
      </div> 
      <div class="form-group"> 
       <label for="groupStatus">Group Status</label> 
       <select class="form-control" ng-model="newGroup.status"> 
       <option value="inactive">Inactive</option> 
       <option value="active">Active</option> 
       </select> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </form> 

这是我收到的错误:

TypeError: undefined is not a function 
at Scope.$scope.addGroup (http://localhost:9000/scripts/app.js:35:19) 

和app.js线35是参考groupsService.addGroup();从上面给出的app.js代码。

回答

5

首先,您在创建$FirebaseArray后返回您的服务。之后你还会创建另一个$FirebaseArray

return $firebase(ref).$asArray(); 

删除该返回语句。这会导致您的服务提前返回,并且所有连接的方法都不适用于您的服务。

groupService.addGroup()您正在调用push,这不是$asArray上的功能。您需要致电.$add()。控制器中也没有传递参数newGroup

$.push方法在$firebase绑定的基础上可用。当您使用$FirebaseArray时,$add方法将新记录推入Firebase。

See the docs for more info

Plunker Demo

var addGroup = function (newGroup) { 
    console.log(newGroup) 
    groups.$add(newGroup); 
}; 

然后在你的控制器,你可以简单地调用:

$scope.addGroup = function(newGroup){ 
    groupsService.addGroup(newGroup); 

    $scope.newGroup = { 
    name: '', 
    status: '' 
    }; 
}; 
+0

感谢您回复!我已经尝试了$ add,它在控制台中给了我相同的错误。 – Lizajean 2014-11-24 23:19:53

+1

您正在从您的服务返回顶部。删除该行。我已经更新了答案。 – 2014-11-24 23:22:52

+0

谢谢!然而,摆脱了错误,现在它在控制台中返回未定义,当我从var addGroup下的console.log(newGroup)。 – Lizajean 2014-11-24 23:29:03