AngularJS 无限 $digest 循环错误

Question

我正在尝试使用 ng-repeat 填充 div 列表。我还使用了一个有深度的框架（这样我就可以浏览列表的元素）。

要设置此深度，我需要调用 getTotalDepths 函数来检查列表项的当前索引和 tempIndex 值。如果它们不同，则应增加总深度，然后 return totalDepths 值。

我运行之后，出现如下错误（约25000次）：

Uncaught Error: [$rootScope:infdig]` http://errors.angularjs.org/1.6.10/$rootScope/infdig?

HTML:

<div style="display: inline-block;" ng-repeat="item in items">
    <div class="item-list" focusable data-focusable-depth="{{getTotalDepths($index)}}">
        <img class="img-fluid" ng-src="{{item.picture}}" />
    </div>
</div>

控制器：

$scope.totalDepths = -1;
var tempIndex = -1;
var x;

$scope.getTotalDepths = function (index) {
    x = $scope.totalDepths;
    if (tempIndex != index) {
        tempIndex = index;
        x = $scope.totalDepths += 1;
    }
    return x;
}

注意：当我在这行增加totalDepths时出现错误：

x = $scope.totalDepths += 1;

非常感谢任何帮助！

Answer 1

在@Slava 的帮助下我解决了这个问题。

按照我的方式调用 getTotalDepths() 是一个很大的错误，因为 Angular 在每个循环中调用它，并且函数 returns 每次都有不同的结果。

我通过简单地调用 ng-init 中的函数来修复它，如下所示：

<div style="display: inline-block;" ng-repeat="item in items" ng-init="depth = getTotalDepths($index)">
    <div class="item-list" focusable data-focusable-depth="{{depth}}">
        <img class="img-fluid" ng-src="{{item.picture}}" />
    </div>
</div>

AngularJS 无限 $digest 循环错误

AngularJS Infinite $digest Loop error

angularjs

angularjs-ng-repeat

angularjs-infdig