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直接与Angular集成AngularFire库，该库管理数据同步和$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）之后;线。

数据更改时ng-class不刷新

2 个答案: