AngularJs - 错误：达到 10 次 $digest() 迭代。中止答案

【问题标题】：AngularJs - Error: 10 $digest() iterations reached. AbortingAngularJs - 错误：达到 10 次 $digest() 迭代。中止
【发布时间】：2013-11-10 16:26:39
【问题描述】：

我正在尝试使用 Angular 创建一个 Metro Tile 类型的网格，为了实现这一点，我希望每个瓷砖都是不同的颜色。所以我的行动计划是创建一个在循环内随机选择颜色的函数（使用ng-repeat）。这是我到目前为止所拥有的......

<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText">
  <div  >
    <h6>{{stockRecord.ProductGroupName}}</h6>
  </div>
</div>

如您所见，我正在使用名为 RandomColourClass 的函数设置类名，这是 JS 位

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}];

$scope.RandomColourClass = function(){
  var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)];
  return randomColour.colour.toString();
};

这一切正常，瓷砖颜色不同，但我不断收到以下错误

错误：达到 10 次 $digest() 迭代。中止！”。

我已经查看了有关该问题的其他帖子，但我无法弄清楚我需要更改哪些内容才能使其正常工作！？任何帮助或指导将不胜感激:)

【问题讨论】：

请发帖GridStockRecords

标签： javascript angularjs angularjs-controller

【解决方案1】：

Angular 执行 digest 函数以在您的数据更改时更新 DOM。

在摘要期间，它会重新计算您在 DOM 中绑定的所有值，在本例中为 {{RandomColorClass()}}。如果其中任何一个发生变化，它会再次执行一个摘要循环（例如，因为某些变量可能取决于已更改变量的值）。

它反复执行此操作，直到连续的两个摘要产生相同的值——即，没有任何变化。

发生的情况是，当摘要发生时，您的 RandomColorClass() 函数被调用并返回一个不同的值。这会触发一个额外的摘要，其中RandomColorClass() 再次返回一个不同的值，这会触发另一个摘要...

你能看出这是怎么回事吗？您不应该以这种方式生成随机值 - 而是在您的范围内生成它们并将它们持久化。

在您的范围内，一种方法可能是：

function randomColourClass() { /* ... */ };

$scope.GridStockRecords.forEach(function(record) {
  record.colorClass = randomColourClass(); 
});

和 HTML：

    <div ng-repeat="stockRecord in GridStockRecords | filter:searchText"
         ng-class="stockRecord.colorClass">
      <div>
        <h6>{{stockRecord.ProductGroupName}}</h6>
      </div>
    </div>

【讨论】：

完全有道理！感谢您的帮助！
正是发生在我身上的事情。非常感谢！

【解决方案2】：

我在 IE10 中遇到了同样的问题，原来问题是我正在使用 window.location 进行重定向。

window.location = "#route/yada";

把代码改成

$location.path("/route/yada);

这解决了我的问题。 =D

【讨论】：

这些重定向方法有些奇怪：$window.location.href 可以上升$digest() iterations reached. Aborting error，$location.path() 有时不起作用。我解决了 $location.url("route/yada");

【解决方案3】：

答案与此特定问题无关，但我将其添加到此处是因为当您搜索错误消息时它位于 Google 首页上，我花了一些时间才弄明白：

在我看来是这样的：

<custom-tag data="[1,2,3]"/>

自定义标签的控制器在$scope.data 上设置了一个观察者。这导致 AngularJS 出错，因为每次它重新检查 data 的值时，它都会从视图中获取一个新对象（请记住，数组是一个对象），因此它永远无法正确消化它。

【讨论】：

【解决方案4】：

我在输入错误 ng-class="submit()" 而不是 ng-click="submit()" 时遇到了这个错误。我无法想象其他人会犯如此愚蠢的错误，但为了记录，这是创建 10 次 $digest() 迭代达到中止的另一种方法！

【讨论】：