在从指令调用的服务中保存AngularFire $ firebaseArray的更新

时间:2015-10-21 20:42:35

标签: angularjs angularfire

我想把头发拉出来试图解决这个问题,我觉得我已经尝试了一切来使这个工作。

我正在创建一个todo应用程序。我在服务中使用AngularFire。有一个item指令重复每个都有一个复选框的项目。选中/取消选中复选框时,它应调用DataService上的方法,以便每次选中/取消选中时,将项目对象{completed:false}更新为{completed:true},反之亦然。 ngChange从一个对象数组传递单个对象(对象代表一个唯一的项)。除非能够在选中/取消选中复选框后保存更新的项目,否则一切似乎都有效。我尝试过的所有内容都举例说明了这个错误:“无效的记录;可以确定某些键的密钥”

在下面的屏幕截图中,控制台说它会更新对象,但在尝试将更新的条目保存到firebase时会抛出错误。我尝试传入的所有内容都给出了同样的错误。我在这做错了什么?请看下面的代码。我花了很长时间摆弄这个,所以任何帮助都会非常感激。如果有什么不合理的话,请问我而不是低估,我真的想尽力解释这个,我真的需要帮助。谢谢!

Console log errors

服务代码:

var app = angular.module('dataService', ['firebase']);

app.factory('DataService', ["$firebaseArray",
  function ($firebaseArray) {
  //create, retrieve, update, destroy data from angularfire 

  var url = 'https://myFirebase.firebaseio.com/item';
  var fireRef = new Firebase(url);

  var factory = {};

  factory.complete = function (data) {
    var completeGoal = $firebaseArray(fireRef);
    console.log("complete, fired in factory");
    var itemID = data.$id;
    console.debug("this item ID: " + itemID);

    if(data.completed === true) {
      console.log("this item data.completed: " + data.completed)
      data.completed = false;
      console.log("this item data.completed: is NOW " + data.completed)
    }
    else {
      console.debug("this item data.completed: " + data.completed)
      data.completed = true;
      console.debug("this item data.completed: is NOW " + data.completed)
    }

    completeGoal.$save(itemID);
    console.log(completeGoal.$save(itemID));
  }

  return factory;

  }]);

指令代码:

app.directive('item', function() {
  return {
    scope: {
      item: '=set',
      onClick: '&',
      listType: '=',
      complete: '='
    },

    controller: function() {},
    controllerAs: 'ctrl',
    bindToController: true,
    transclude: true, 
    replace: true,
    restrict: 'EA',
    templateUrl: 'directives/items.html',
    link: function(scope, elem, attrs) {

      scope.$parent.onChange = function (data) {
        scope.ctrl.complete(data);
      }        

      //filter the items by type
      var typeFilter = {type: scope.ctrl.listType}
      scope.filterExpr = typeFilter;       
    }
  }
});

项目指示模板:

  <div class="row goal-item" ng-repeat="item in ctrl.item | filter:filterExpr">        
    <div class="col-xs-12 col-sm-8 col-sm-offset-2">
      <ul>
        <li>
          <label class="checkbox" ng-click="onChange(item)">
            <input type="checkbox" class="goal-checkbox" ng-click="null" />              
          </label>
          <span class="goal-title goal-completed">{{item.text}}</span>
        </li>
      </ul>
    </div>
  </div>

控制器:

app.controller('mainCtrl', ['$scope','DataService', function($scope, DataService) {

  this.complete = DataService.complete;

}])

1 个答案:

答案 0 :(得分:0)

我认为这里的问题是您使用实际的firebase密钥来尝试保存数据。根据angularfire文档,$ save方法实际上接受2个参数中的一个:

$save(recordOrIndex)

所以记录 - 它将是整个对象或索引,它将是本地数组内的索引位置[0,1,2,3,...]

我认为最好的办法是尝试保存与使用唯一键相对的整个对象。像这样:

completeGoal.$save(data);

希望这很容易!

这里是我引用的angularfire api的链接:

https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-saverecordorindex