Question

我有一个非常简单的控制器，可以与我的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使用一些动画来滑动我的所有课程。然后，此Firebase中的数据会在我的Angular应用程序之外更新，并且更改会反映在应用程序中。

这两个都很好，数据立即更新，但我希望我的整个ng-repeat离开，然后在Firebase中数据更改时输入。即。

Firebase中的数据更改
整个ng-repeat离开时带有花哨的动画
整个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。

AngularJS＆amp; Firebase - 在更改时重绘重复

1 个答案: