ng-repeat 进入对象数组的无限循环

Question

我有一个 HTML 块，它使用 ng-repeat 访问类型为“items”的对象数组中的值：

[{
    method: 0,
    text: 'text1'
},
{
    method: 1,
    text: 'text2'
},
{
    method: 3,
    text: 'text3'
}]

下面是 HTML 块：

<div class="item" ng-if="$ctrl.isHighlighted()">
    <div class="item-label">Highlighted field</div>
    <span ng-repeat="item in $ctrl.items track by $index">
        <span>{{item.text}}</span>
    </span>
</div>

组件中的 isHighlighted() 方法填充“items”数组并返回数组的长度，因此只有当长度 > 0 时才会渲染块。

但我不断收到错误： 错误：[$rootScope:infdig] 已达到 10 $digest() 迭代。正在中止！ 如何阻止 ng-repeat 进入无限循环？

Answer 1

“错误：[$rootScope:infdig] 已达到 10 $digest() 迭代。正在中止！”当存在无限循环的摘要循环时，AngularJS 中会发生错误。当您的代码在摘要循环内不断触发 AngularJS 模型中的更改，导致其反复重新评估时，通常会发生这种情况。在您的情况下，似乎

ng-if

指令和

ng-repeat

指令正在以导致此错误的方式交互。

要解决此问题，您可以尝试以下其中一项工作：

1. 使用 ng-show 而不是 ng-if：

   ng-if

   指令创建一个新的作用域，这有时会导致摘要循环问题。尝试使用

   ng-show

   而不是

   ng-if

   有条件地显示或隐藏元素。这可能有助于避免无限摘要循环：

<div class="item" ng-show="$ctrl.isHighlighted()">
    <div class="item-label">Highlighted field</div>
    <span ng-repeat="item in $ctrl.items track by $index">
        <span>{{item.text}}</span>
    </span>
</div>

2. 限制项目数量： 如果您预计

   items

   数组中存在大量项目并且一次性渲染所有项目会导致性能问题，您可以使用

   limitTo

   过滤器限制显示的项目数量：

<div class="item" ng-if="$ctrl.isHighlighted()">
    <div class="item-label">Highlighted field</div>
    <span ng-repeat="item in $ctrl.items | limitTo: 10 track by $index">
        <span>{{item.text}}</span>
    </span>
</div>

这将限制

ng-repeat

仅显示前 10 项，例如。

3. 检查其他无限循环原因： 有时，应用程序代码的其他部分可能会导致无限摘要循环。检查代码中是否有任何其他部分（例如监视或事件处理程序）可能会在摘要周期内触发模型中的更改。检查并重构您的代码，以确保它不会无意中触发多个摘要周期。

4. 优化

   isHighlighted()

   函数： 如果

   isHighlighted()

   函数计算量大且频繁更改模型，请考虑对其进行优化以减少其对摘要周期的影响。

5. 更新 AngularJS： 如果您使用的是旧版本的 AngularJS，请考虑更新到较新的版本。较新的版本可能有更好的性能优化和错误修复。