AngularJS 和 Firebase - 更改时重绘 ng-repeat

Question

我有一个非常简单的 Controller ，可以与我的 Firebase 同步。

.controller('SchedulesCtrl', ['$scope', '$firebase',
            function($scope, $firebase) {
  var ref = new Firebase("https://blah.firebase.io/schedules/110/2014-10-04/1");
  var sync = $firebase(ref);
  $scope.schedules = sync.$asArray();
}]);

这会填充我的 ng-repeat:

<ul>
    <li ng-repeat="schedule in schedules | orderBy:'start_date_time'" class="class-current class-single scale-fade repeated-item">
        <div class="col-sm-2">
            <div class="class-shortname">{{schedule.class_short_name}}</div>
        </div>
        <div class="col-sm-10 class-name">{{schedule.class_name}}</div>
        <div class="col-sm-5">
            <div class="class-time">
                {{schedule.start_date_time | date: "h:mma"}}-{{schedule.end_date_time | date: "h:mma"}}
            </div>
        </div>
        <div class="col-sm-5">
            <div class="class-instructor">{{schedule.staff_first_name}}</div>
            <div class="class-checkedin">{{schedule.staff_last_name}}</div>
        </div>
    </li>
</ul>

ng-repeat 使用一些动画来在我的所有类(class)中滑动。然后，此 Firebase 中的数据在我的 Angular 应用程序外部更新，并且更改会反射(reflect)在应用程序中。

这两种方法都工作得很好，并且数据会立即更新，但我希望我的整个 ng-repeat 能够在 Firebase 中的数据更改时离开然后再输入。即

1. Firebase 中的数据更改
2. 整个 ng-repeat 叶子都带有精美的动画
3. 整个 ng-repeat 重新进入并带有精美的动画 - 带有更新的数据

我已经掌握了数据和动画部分，但是当我的 Firebase 数据发生变化时，如何告诉 Angular 离开并进入(这些是 ngAnimate 的方法)我的 ng-repeat？

Answer 1

您可以使用 $watch 跟踪 Firebase 数据更改。

只需将 ng-repeat 填充代码包装到 $watch 方法中即可:

var unwatch = obj.$watch(function() {
  console.log("data changed!");
});

将其分配给变量，以防您稍后想通过调用 unwatch() 释放监听器

取自 documentation

要通过 ngAnimate 为数组的重新填充分配动画，您可能需要查看 ngAnimate 文档 here .