AngularJS - 为什么我不能实时更新我的​​阵列长度？

Question

我正在使用AngularJS和Firebase填充简单的待办事项应用程序。 （而且我也是AngularJS的新手！）待办事项备注将保存在$scope.todos变量中。这是我的app.js代码：

myApp.controller('mainController', function($scope, $firebase) {
    // connect to firebase
    var ref = new Firebase("https://XXX.firebaseio.com/todos");
    var fb = $firebase(ref);
    $scope.todos = [];
    // sync as object
    var syncObject = fb.$asObject();
    // 3-way data binding
    syncObject.$bindTo($scope, "todos");

    $scope.addNewTodo = function(){
        var todoTitle = $(".add-todo").val();
        var createdAt = new Date();
        var element = {
            title: todoTitle,
            timestamp: createdAt,
            done: false
        };
        fb.$push(element);
        $(".add-todo").val("");
    };
});

这是我的index.html代码：

<div class="container" ng-app="todoApp" ng-controller="mainController">
    <div class="row">
        <div class="col-md-6">
            <div class="todolist not-done">
                <h1>Todos</h1>
                <input type="text" class="form-control add-todo" placeholder="Add todo" ng-enter="addNewTodo()">
                <button id="checkAll" class="btn btn-success">Mark all as done</button>
                <hr/>
                <ul id="sortable" class="list-unstyled" ng-repeat="todo in todos">
                    <li class="ui-state-default">
                        <div class="checkbox">
                            <label>
                            <input type="checkbox" value=""/> {{ todo.title }}</label>
                        </div>
                    </li>
                </ul>
                <div class="todo-footer">
                    <strong><span class="count-todos">{{ todos.length }}</span></strong> Items Left
                </div>
            </div>
        </div>
    </div>
</div>

我添加{{todos.length}}来计算$scope.todos数组中剩余的待办事项元素。但是，当我在$scope.todos数组中添加或删除元素时，它不会自动更新。这对我来说有点奇怪，因为它与MeteorJS完全不同，如果我做同样的事情。

Answer 1

我相信你会想要使用同步数组而不是3路数据绑定https://www.firebase.com/docs/web/libraries/angular/quickstart.html#section-arrays

Answer 2

正如@unobf所说，在这种情况下你应该使用AngularFire的$asArray。

Firebase在后台异步加载（并同步）您的数据。这意味着即使当前用户不是添加任务的用户，它也可能会收到对阵列的更新。当发生这种情况时，它需要（除了更新数组）通知AngularJS数据被修改。您调用$asObject来处理对象的此类通知，但不是为处理数组而设计的。要处理Firebase的有序集合（不使用索引，但使用不同类型的键）和AngularJS数组之间的复杂性，您需要使用$asArray。

.controller('mainController', function($scope, $firebase) {
// connect to firebase
var ref = new Firebase("https://XXX.firebaseio.com/todos");
var fb = $firebase(ref);
$scope.todos = [];
// sync as object
var syncObject = fb.$asArray();
// 3-way data binding
$scope.todos = syncObject; // was: syncObject.$bindTo($scope, "todos");

$scope.addNewTodo = function(){
    var todoTitle = $(".add-todo").val();
    var createdAt = new Date();
    var element = {
        title: todoTitle,
        timestamp: createdAt,
        done: false
    };
    $scope.todos.$add(element);  // was: fb.$push(element);
    $(".add-todo").val("");
};

您可以在此处找到一个有效的示例：http://jsbin.com/celefu

要了解有关此类问题的更多信息，请参阅我对这些问题的回答：

• Firebase binding not being reflected in Angular view
• How to append a new value to an item within an array in Firebase?
• firebase get data for every child item's child
• Asynchronous access to an array in Firebase（其中包含指向处理此类问题的更多答案的链接）