AngularJS：更新数组后 ng-repeat 不刷新

Question

我正在使用 Ionic 框架，并尝试使用以下 HTML 代码显示“卡片”元素列表：

<div ng-repeat="case in cases">

    <div class="list card">

      <div class="item item-avatar">
        <button ng-click="rmpost(card.key)" style="background: transparent; border: none;"><i class="icon ion-close-round"></i></button><!--if (dataSnapshot.val().volunteer_email == firebase.auth().currentUser.email)-->
        <h2>{{card.volunteer_name}} ({{card.volunteer_email}})</h2>
        <p>{{card.title}} ({{card.creationdate}})</p>
      </div>

      <div class="item item-body">
        <img class="full-image" src={{card.snapshot}}>
        <p>{{card.message}}</p>
      </div>

    </div>

      </div>

这是我在控制器内部用于更新案例数组的 JS 代码：

.controller('campaignslookCtrl', function($rootScope, $scope, $cordovaGeolocation, $state, $ionicPopup, Util)
        {
            $scope.reload = function()
            {
            $scope.reload();
            }

            $scope.rmpost = function(key)
            {
              alert("rmpost");
            }

            $scope.cases = [];

            //...

    firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {

            $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});

});
//..
})

$scope.cases 在初始化为常量值时显示良好，但在动态更新（通过 $push）时没有任何显示。

Answer 1

您需要将您的push 调用包装在$apply 方法中。因为您是从角度范围之外（来自 firebase 回调）添加到您的数组项中。

尝试以下方法：

...
firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function () {
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});

                 });
             });
...

Answer 2

问题是您在角度 context 之外更新模型。数据已更改，但 Angular 尚未运行它自己的内部摘要，并且尚未意识到您的模型中发生了任何更改。

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot) //FIREBASE EVENT NOT WITHIN ANGULAR CONTEXT

你需要使用angular的$scope.$apply方法。

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

$apply([exp]); $apply() 用于执行 Angular 中的表达式 从角度框架之外。 （例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。 因为我们是 调用我们需要执行适当范围的角度框架 异常处理、执行手表的生命周期。

以下是如何使用$scope.$apply 进入有效的角度上下文，然后更新数据：

firebase.database().ref('/cases')
        .on('child_added', function(dataSnapshot)
            {
                $scope.$apply(function() {
                    //we are now within the angular context, so any updates to the model with be handled correctly
                    $scope.cases.push({key: dataSnapshot.key,
                                     volunteer_name: dataSnapshot.val().volunteer_name,
                                     volunteer_email: dataSnapshot.val().volunteer_email,
                                     title: dataSnapshot.val().title,
                                     creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                     snapshot: dataSnapshot.val().snapshot,
                                     message: dataSnapshot.val().message});
                });
});

理论上，您可以手动调用$scope.$digest，但根据 angular 文档，不建议这样做。 $apply 正确转发异常并允许处理观察者。通常使用这种方法比自己处理$digest 更好。

$digest();处理当前作用域的所有观察者及其 孩子们。因为观察者的听众可以改变模型，所以 $digest() 不断调用观察者，直到没有更多的听众 射击。这意味着有可能进入无限循环。 此函数将抛出“超出最大迭代限制”。如果 迭代次数超过10次。

通常，您不会直接在控制器或中调用 $digest() 指令。相反，您应该调用 $apply() （通常在 directive)，它将强制执行 $digest()。

Answer 3

与 MaKCbIMKo 的答案相同。

我要补充的是，有一个更易于阅读的替代方案：

$scope.cases.push({key: dataSnapshot.key,
                                 volunteer_name: dataSnapshot.val().volunteer_name,
                                 volunteer_email: dataSnapshot.val().volunteer_email,
                                 title: dataSnapshot.val().title,
                                 creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(),
                                 snapshot: dataSnapshot.val().snapshot,
                                 message: dataSnapshot.val().message});

$scope.digest();