javascript - 数据更改时 ng 类不刷新

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()。其次，您可以免费获得实时阵列同步。