当复选框更改时,AngularFire 3向数据绑定不会更新firebase

Question

我正在使用AngularFire模块开发一个使用Angular和Firebase的简单todo应用程序.

所以我的模型中有一个布尔属性,由模板中的复选框表示,问题是我正在尝试使用AngularFire的三路数据绑定,使用该$bind方法保持所有更改同步(firebase数据,DOM和ng) -model)但是当我选中一个复选框时,firebase数据没有更新.

这是我使用AngularFire $bind方法的控制器:

angular.module('singularPracticeApp')
  .controller('TodoCtrl', ['$scope', 'TodoService', function ($scope, todoService) {
    $scope.todos = todoService;

    $scope.todos.$bind($scope, 'todo.done');

    $scope.addTodo = function () {
      $scope.todos.$add({text: $scope.todoText, done:false});
      $scope.todoText = '';
    };

    $scope.remaining = function () {
      var count = -11;
      angular.forEach($scope.todos, function(todo){
        count += todo.done? 0 : 1;
      });
      return count;
    };

    $scope.clear = function (id) {
      $scope.todos.$remove(id);
    };
  }]);

这是tempalte文件:

<div ng-controller="TodoCtrl">
  <h4>Task runner</h4>
  <span>{{remaining()}} todos left.</span>
  <ul>
    <li ng-repeat="(id, todo) in todos">
      <input type="checkbox" ng-model="todo.done">
      <span ng-if="todo.done" style="color: #ddd;">{{todo.text}}</span>
      <span ng-if="todo.done == false">{{todo.text}}</span>
      <small ng-if="todo.done"><a href="" ng-click="clear(id)">clear</a></small>
    </li>
  </ul>
  <form ng-submit="addTodo()">
    <input type="text" ng-model="todoText" placeholder="New todo item">
    <input type="submit" class="btn btn-primary" value="add">
  </form>
</div>  

我错过了什么吗？真的可以使用一个简单的复选框来完成这项工作吗？

提前致谢.

Answer 1

你没有在这里包含todoService,所以很难给你一个准确的答案.我假设todoService返回一个$ firebase实例,其中包含todos看起来很可能的内容.请记住,问题也可能出在该代码中.

您可以解决的几个问题,可能会解决您的问题:

你的TodoCtrl不是每件商品

您似乎正在使用TodoCtrl,就好像它是在ng-repeat中创建的每个项目一样.但是,它存在于ng-repeat范围之外,仅为整个列表创建一次.

Ng-repeat不会重复使用您现有的控制器范围.

指令在隔离范围内运行.这意味着它们不与您的控制器共享范围.因此,当您执行ng-repeat ="todo in todos"时,您不会添加todo到控制器的范围中.

这是有道理的,因为每次ng-repeat迭代都会覆盖同一个todo对象.

您正在尝试双重绑定到同步对象

您正在尝试创建三向绑定$scope.todos.[$todo].done,但您已经创建了一个三向绑定$scope.todos.相反,让$ scope.todos负责同步.

您已尝试将$ scope.todos绑定到属性本身

当您调用$ bind时,您将$ scope.todos绑定到$ scope.todos.todo.done.显然,这种自我引用的陈述不是你想要的.我不知道你的服务返回了什么,但也许你的意思是:

todoService.$bind($scope, 'todos');

如果您不想在整个待办事项列表中自动推送更改,则可以添加$ save调用而不是使用$ bind:

$scope.todos = todoService;

<input type="checkbox" ng-model="todo.done" ng-change="$parent.todos.$save(id)">

全部一起:

angular.module('singularPracticeApp')
   .service('todoService', function($firebase) {
      return $firebase( new Firebase(URL_TO_TODOS_LIST) );
   });
   .controller('TodoCtrl', function($scope, todoService) {
      todoService.$bind($scope, 'todos');

      $scope.addTodo = function () {
         $scope.todos.$add({text: $scope.todoText, done:false});
         $scope.todoText = '';
      };

      /** ... and so on ... **/      
   });