许多 firebase 查询导致“达到 10 $digest() 迭代”错误

Question

例如，我想制作一个如下所示的列表：

Apple - Steve Jobs
Microsoft - Bill Gates
Tesla - Elon Musk

我将使用两个 Firebase 应用程序和 AngularJS 来执行此操作。

第一个 FB 应用如下所示：

companies
|_Apple: 0
|_Microsoft: 0
|_Tesla: 0

第二个 FB 应用：

companies-ceo
|_Apple: "Steve Jobs"
|_Microsoft: "Bill Gates"
|_Tesla: "Elon Musk"

所以我有一个 AngularJs 应用程序：

angular.module('App', ["firebase"])
.controller('AppCtrl', ['$scope', '$firebaseObject', 
    function($scope,$firebaseObject){
        var userRef = new Firebase('https://companies.firebaseio.com/');
        var userObj = $firebaseObject(userRef);
        userObj.$bindTo($scope, "userData");

        $scope.getCEO = function(companyName){
            var indexRef = new Firebase('https://companies-ceo.firebaseio.com/'+companyName);
            var indexObj = $firebaseObject(indexRef);
            indexObj.$loaded(function(){
                return indexObj.$value;
            })
    };

}])

还有一个 HTML 代码：

<div ng-controller="AppCtrl">
    <div ng-repeat="(companyName,tmp) in userData">
        <p>{{companyName}} - {{getCEO(companyName)}}</p>
    </div>
</div>

当我不使用 getCEO() 函数时，例如：

<div ng-controller="AppCtrl">
    <div ng-repeat="(companyName,tmp) in userData">
        <p>{{companyName}}</p>
    </div>
</div>

一切正常，但使用 getCEO() 函数会导致错误：

Error: 10 $digest() iterations reached. Aborting!

我该如何解决？

Answer 1

因为您在 {{}} 指令中调用了 getCEO(companyName)，该指令正在评估每个摘要周期，这导致摘要周期达到其限制并引发错误。我建议您不要这样做，而是在 ng-repeat 的 div 渲染时间上调用 getCEO(companyName) 方法，但我将在这里使用 ng-init

标记

<div ng-repeat="(companyName,tmp) in userData" ng-init="ceo=getCEO(companyName)">
    <p>{{companyName}} - {{ceo}}</p>
</div>

或

另一个很好的例子是使用:: bindonce 指令将运行指定的方法只运行一次。通过使用这个指令getCEO(companyName) 方法将只调用一次。

标记

<div ng-repeat="(companyName,tmp) in userData">
    <p>{{companyName}} - {{::getCEO(companyName)}}</p>
</div>

注意：-Bindonce :: 指令需要 Angular 1.3+ 版本