从多个节点检索数据时，AngularFire '10 $digest()迭代次数达到‘error’错误

Question

我的web应用程序使用Firebase JS和AngularJS来显示事件注册和为每个事件注册的用户的列表。事件和用户数据位于不同的数据库节点中。

数据库：

"event_registrations" : {
    "$event_id" : {
        "$user_id" : {
           "registration_date" : "..." 
           "total_amount" : "...",
        }
    }
},

"users" : {
    "$user_id" : {
      "events" : {
        "event_id" : 1
      },
      "profile" : {
        "email" : "..."
        "name" : "...",
        // ...
      }
    },
}

角度：

function MyController($scope, $firebaseObject) {
    // Retrieve event data
    $scope.events = scope.firebaseRef.child('event_registrations');

    // Retrieve user_data
    $scope.getUserData = function(userID) {
        var ref = $firebaseObject(scope.firebaseRef
           .child('users')
           .child(userID)
           .child('profile'));

        ref.$ref().once("value", function(dataSnapshot) {
            var data = dataSnapshot.val();
            $scope.user_data = data;
        });
    };
 }

网页：

 <div ng-repeat="event in event_registrations">
    <table>
        <tr>
            <tr ng-repeat="(user_id, user_data) in event">
                {{getUserData(user_id)}}

                <td>{{user_data.email}}</td>
                <td>{{user_data.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

问题是，当从网页调用getUserData()时，会产生10 $digest() iterations reached错误，并且网页上的数据在Firebase DB中更新时会实时停止更新。

如何解决这个问题呢？我看过Firebase-Util，但不确定在这种情况下如何具体使用它。

Answer 1

来自Firebase Docs，

要读取路径上的数据并侦听更改，请使用firebase.database.Reference的on()或once()方法来观察事件。

为了实时更新，你应该使用on()方法。此方法在附加侦听器时触发一次，并在每次更改数据(包括子项)时再次触发。

在你的情况下，

ref.$ref().on("value", function(dataSnapshot) {
        var data = dataSnapshot.val();
        $scope.user_data = data;
    });

Answer 2

通过在getUserData()中简单地返回Firebase数据库引用修复

 $scope.getUserData = function(userID) {
    var ref = $firebaseObject(scope.firebaseRef
        .child('users')
        .child(userID)
        .child('profile'));

    return ref;
};

然后在ng-repeat`元素的ng-init中调用getUserData()

<tr ng-repeat="(user_id, user_data) in event" ng-init="user_data=getUserData(user_id)>
      <td>{{user_data.email}}</td>
      <td>{{user_data.name}}</td>
</tr>