AngularJS - 배열 길이를 실시간으로 업데이트 할 수없는 이유는 무엇입니까?

AngularJS 및 Firebase을 사용하여 간단한 할일 메모 응용 프로그램을 채우고 있습니다. (AngularJS도 처음입니다!) To-do 노트는 $scope.todos 변수에 저장됩니다. 이것은 내 app.js 코드 :AngularJS - 배열 길이를 실시간으로 업데이트 할 수없는 이유는 무엇입니까?

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>

내가 $scope.todos 배열의 나머지 일하러 요소를 카운트 {{todos.length}}을 추가했습니다. 그러나 $scope.todos 배열에서 요소를 추가하거나 제거 할 때 자동으로 업데이트되지 않습니다. 이것은 내가 조금 이상하다. 왜냐하면 나는 똑같은 일을한다면, MeteorJS이하는 것과는 아주 다르다.

출처

2014-12-27 sonlexqt

저는 Firebase에 익숙하지 않지만 Firebase와 관련이있는 것으로 보입니다. 내 테스트에서 일하고있어 : http://plnkr.co/edit/TmGu2V92rz4BrompD8Dx?p=preview –

바인딩 동기화 된 배열 대신 3 방식의 데이터를 사용할 것으로 예상 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

은 이러한 질문에 대한 내 대답을 참조 이러한 유형의 문제에 대한 자세한 내용은 :