AngularJs - 错误:已达到 10 次 $digest() 迭代.中止 [英] AngularJs - Error: 10 $digest() iterations reached. Aborting

问题描述

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

<div ><h6>{{stockRecord.ProductGroupName}}</h6>

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

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'缩略图平铺红色'}];$scope.RandomColourClass = function(){var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)];返回 randomColour.colour.toString();};

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

<块引用>

错误:已达到 10 次 $digest() 迭代.正在中止！".

我已经查看了有关该问题的其他帖子，但我不知道我需要更改什么才能使其正常工作！?任何帮助或指导将不胜感激:)

解决方案

Angular 执行一个 digest 函数来在您的数据发生变化时更新 DOM.

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

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

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

你能看出这是怎么回事吗?您不应该以这种方式生成随机值 - 而是在您的范围内生成它们并保留它们.

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

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

和 HTML:

 
<div><h6>{{stockRecord.ProductGroupName}}</h6>

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....

<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

$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!".

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 :)

解决方案

Angular performs a digest function to update the DOM when your data changes.

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).

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...

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:

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

这篇关于AngularJs - 错误:已达到 10 次 $digest() 迭代.中止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！