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

【问题标题】：Saving Updates to AngularFire $firebaseArray in a Service Called from a Directive在从指令调用的服务中保存对 AngularFire $firebaseArray 的更新
【发布时间】：2015-10-21 20:42:35
【问题描述】：

我正在努力解决这个问题，我觉得我已经尽了一切努力来解决这个问题。

我本质上是在创建一个待办事项应用程序。我在服务中使用 AngularFire。有一个 item 指令重复每个都有一个复选框的项目。当一个复选框被选中/取消选中时，它应该调用 DataService 上的一个方法来将项目对象 {completed: false} 更新为 {completed: true} ，反之亦然，每次它被选中/取消选中时。 ngChange 从对象数组中传入单个对象（对象代表一个唯一项）。除了选中/取消选中复选框后能够保存更新的项目外，一切似乎都有效。例如，我尝试过的一切都给出了这个错误：“无效记录；可以确定某个键的键”

在下面的屏幕截图中，控制台说它更新了对象，但在尝试将更新的条目保存到 firebase 时抛出错误。我尝试传入的所有内容都给出了相同的错误。我在这里做错了什么？请看下面的代码。我花了很长时间摆弄这个，所以任何帮助将不胜感激。如果有什么不明白的地方，请问我而不是投反对票，我真的想尽我所能解释这一点，并且真的需要帮助。谢谢！

服务代码：

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;

}])

【问题讨论】：

标签： angularjs angularfire

【解决方案1】：

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

$save(recordOrIndex)

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

我认为最好的办法是尝试保存整个对象，而不是使用唯一键。像这样：

completeGoal.$save(data);

希望就这么简单！

这是我引用的 angularfire api 的链接：

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

【讨论】：