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

Question

我正在尝试使用Angular创建类似于Metro磁贴的网格，为了实现这一点，我希望每个磁贴都有不同的颜色。所以我的计划是在循环中创建一个随机选择颜色的函数（使用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（）迭代。中止！”

我已经查看了其他帖子，但我无法弄清楚需要更改什么才能使其正常工作！？任何帮助或指导将不胜感激 :)

- user2859298

---

请发布 GridStockRecords。 - Maxim Shoustin

Answer 1

当数据发生变化时，Angular会执行一个“digest”功能来更新DOM。

在digest过程中，它会重新计算你在DOM中绑定的所有值，例如{{RandomColorClass()}}。如果其中任何一个值发生变化，它会再次执行digest周期（因为某些变量可能依赖于已更改变量的值，例如）。

它会一遍又一遍地这样做，直到连续两个digest的结果相同--也就是说，没有任何东西发生了变化。

发生的情况是，在执行digest时，会调用你的RandomColorClass()函数并返回一个不同的值。这会触发其他的digest，其中RandomColorClass()再次返回一个不同的值，从而触发另一个digest......

你能看出这会导致什么问题吗？你不应该以这种方式生成随机值--相反，在作用域内生成它们并使其保持不变。

一种方法可能是，在你的作用域中：

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>

- John Ledbetter

---

完全有道理！感谢你的帮助！ - user2859298

发生了与我完全相同的事情。非常感谢！ - zeroliu

Answer 2

我在IE10中遇到了同样的问题，结果发现问题是因为我正在使用window.location进行重定向。

window.location = "#route/yada";

将代码更改为

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

这解决了我的问题。=D

- Markus Knappen Johansson

---

这些重定向方法有些奇怪：$window.location.href 会引发 $digest() iterations reached. Aborting error 错误，而 $location.path() 有时候不起作用。我通过使用 $location.url("route/yada") 解决了这个问题。 - Chaki_Black

Answer 3

虽然我的回答与这个特定问题无关，但我在这里添加它是因为当你搜索错误信息时，它出现在Google首页上，而我花了一些时间才弄清楚：

我的视图中有类似这样的内容：

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

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

- stackular

Answer 4

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

- claireablani