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() 迭代。中止的主要内容,如果未能解决你的问题,请参考以下文章

错误:达到 10 次 $digest() 迭代。中止

AngularJs 错误:“达到 10 个 $digest() 迭代。中止!”

使用 angular 指令会导致错误:达到 10 次 $digest() 迭代。中止

Angularjs 10 $digest() 迭代达到

错误:达到 10 次 $digest() 迭代。中止!在最后 5 次迭代中触发的观察者:过滤器中的 []

范围计数器的值增加 1 会达到 10 次 $digest() 迭代。中止错误消息