AngularJs - 错误:达到 10 次 $digest() 迭代。中止
Posted
技术标签:
【中文标题】AngularJs - 错误:达到 10 次 $digest() 迭代。中止【英文标题】:AngularJs - Error: 10 $digest() iterations reached. Aborting 【发布时间】: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
【参考方案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() 迭代达到中止的另一种方法!
【讨论】:
以上是关于AngularJs - 错误:达到 10 次 $digest() 迭代。中止的主要内容,如果未能解决你的问题,请参考以下文章
AngularJs 错误:“达到 10 个 $digest() 迭代。中止!”
使用 angular 指令会导致错误:达到 10 次 $digest() 迭代。中止