数据更改时ng-class不刷新

Question

我想在我的数据更改时更改颜色项。我使用这个模板代码：

<ion-view view-title="Evénement" class="content">
    <ion-content class="padding">
         <ion-list>
            <ion-item ng-repeat="myuser in users">
                <span>{{myuser.user_name}} </span><a class="button button-icon icon ion-person-add icon_add" ng-click="addContact('{{myuser.id}}')" ng-class="{contact_added : myuser.isContact }"></a>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

我使用 firebase 来加载和保存数据。所以，我用这段代码来同步数据。

ref.child('contact').child(authData.uid).on('child_added', function (snapshot) {
        var myUser = snapshot.key();
        $scope.users.push(myUser);
    });

当我在 firebase 上添加联系人时，我的颜色图标不会立即改变。我必须在 html 页面上单击并移动鼠标以更新颜色。

当数据发生变化时，如何立即刷新我的图标？

Answer 1

Don't use $scope.$apply(), use AngularFire.

Angular 应用程序不必管理摘要循环。 Firebase 通过 AngularFire 库直接与 Angular 集成，该库管理数据同步和$digest 的触发。

在您的情况下，您可以创建一个$firebaseArray 来同步您的更改：

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController);

function MyController($scope, rootRef, $firebaseArray) {
  var userRef = rootRef.child('contact').child(authData.uid);
  $scope.users = $firebaseArray(userRef);
}

使用 AngularFire 的优势有两个。首先，您不必管理$scope.$apply()。其次，您可以免费获得实时数组同步。

Answer 2

添加 $scope.$apply();在 $scope.users.push(myUser) 之后；行。