javascript AngularJs - 错误：已达到 10 次 $digest() 迭代。中止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19693410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs - Error: 10 $digest() iterations reached. Aborting
提问by user2859298
I am trying to create a Metro Tile type grid with Angular, to achieve this i want each of the tiles to be a different colour. So my plan of action was to create a function that would randomly pick a colour inside a loop (using ng-repeat). Here is what i have so far....
我正在尝试使用 Angular 创建一个 Metro Tile 类型的网格，为了实现这一点，我希望每个瓷砖都是不同的颜色。所以我的行动计划是创建一个函数，在循环中随机选择一种颜色（使用ng-repeat）。这是我到目前为止所拥有的......
<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText">
<div >
<h6>{{stockRecord.ProductGroupName}}</h6>
</div>
</div>
So as you can see i am setting the class name with a function called RandomColourClass, Here is the JS bits
因此，正如您所看到的，我正在使用名为 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();
};
This all works fine and the tiles are of different colours but i keep getting the following error
这一切正常，瓷砖颜色不同，但我不断收到以下错误
Error: 10 $digest() iterations reached. Aborting!".
错误：已达到 10 次 $digest() 迭代。中止！”。
I've had a look at other posts around the issue but i can't figure out what i need to change to get it working!? Any help or direction would be greatly appreciated :)
我已经查看了有关该问题的其他帖子，但我不知道我需要更改什么才能使其正常工作！？任何帮助或指导将不胜感激:)
回答by John Ledbetter
Angular performs a digestfunction to update the DOM when your data changes.
当你的数据发生变化时，Angular 会执行一个摘要函数来更新 DOM。
During the digest, it recomputes all the values you have bound in the DOM, in this case {{RandomColorClass()}}. If any of them change, it again performs a digest cycle (since some variables may depend on the value of of the changed variable, for example).
在摘要期间，它会重新计算您在 DOM 中绑定的所有值，在本例中为{{RandomColorClass()}}。如果其中任何一个发生变化，它会再次执行摘要循环（例如，因为某些变量可能取决于更改变量的值）。
It does this repeatedly until two digests in a row result in the same values -- i.e, nothing has changed.
它重复执行此操作，直到连续的两个摘要产生相同的值——即，没有任何变化。
What's happening is that when a digest occurs, your RandomColorClass()function is being called and returns a different value. This triggers an additional digest, where RandomColorClass()again returns a different value, which triggers another digest...
发生的事情是，当摘要发生时，您的RandomColorClass()函数被调用并返回不同的值。这会触发一个额外的摘要，RandomColorClass()再次返回一个不同的值，这会触发另一个摘要......
Can you see where this is going? You shouldn't be generating random values in this manner -- instead, generate them in your scope and persist them.
你能看出这是怎么回事吗？您不应该以这种方式生成随机值——而是在您的范围内生成它们并保留它们。
One approach might be, in your scope:
在您的范围内，一种方法可能是：
function randomColourClass() { /* ... */ };
$scope.GridStockRecords.forEach(function(record) {
record.colorClass = randomColourClass();
});
and HTML:
和 HTML：
<div ng-repeat="stockRecord in GridStockRecords | filter:searchText"
ng-class="stockRecord.colorClass">
<div>
<h6>{{stockRecord.ProductGroupName}}</h6>
</div>
</div>
回答by Markus Knappen Johansson
I had the same problem in IE10 turns ut that the problem was that I was redirecting using window.location.
我在 IE10 中遇到了同样的问题，原来问题是我正在使用 window.location 进行重定向。
window.location = "#route/yada";
Changed the code to
将代码更改为
$location.path("/route/yada);
And that solved my issues. =D
这解决了我的问题。=D
回答by stackular
Answer unrelated to this particular question, but I'm adding it here because it's on the Google front page when you search for the error message and it took me a bit until I figured it out:
回答与这个特定问题无关，但我在这里添加它是因为当您搜索错误消息时它在 Google 首页上，我花了一点时间才弄明白：
I had something like this in my view:
在我看来，我有这样的事情：
<custom-tag data="[1,2,3]"/>
And the controller of the custom tag had a watcher set up on $scope.data. This caused AngularJS to barf because every time it re-checked the value of datait got a new object from the view (remember, the array is an object) so it never finished digesting it properly.
自定义标签的控制器在$scope.data. 这导致 AngularJS 崩溃，因为它每次重新检查它的值时data都会从视图中获取一个新对象（请记住，数组是一个对象），因此它永远不会正确消化它。
回答by claireablani
I encountered this error when I mistyped ng-class="submit()" instead of ng-click="submit()". I can't imagine anyone else making such a silly error, but for the record, this is another way to create 10 $digest() iterations reached aborting!
当我输入错误 ng-class="submit()" 而不是 ng-click="submit()" 时，我遇到了这个错误。我无法想象其他人会犯这样一个愚蠢的错误，但为了记录，这是另一种创建 10 $digest() 迭代达到中止的方法！
