AngularJs - 错误：达到10 $摘要（）迭代。中止 [英] AngularJs - Error: 10 $digest() iterations reached. Aborting

问题描述

我想创建一个角瓷砖新城电网类型，实现这一点，我希望每个砖是一种不同的颜色。所以，我的行动计划是要建立一个功能，将随机挑选一个循环内的颜色（采用NG-重复）。以下是我迄今为止....

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>

所以你可以看到我设置类名以一个名为RandomColourClass功能，这里是JS位

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();
};

这一切工作正常和砖有不同的颜色，但我不断收到以下错误错误：！达到10 $摘要（）迭代中止。我看了一下周围的问题，其他职位，但我想不出什么我需要改变，以得到它的工作！？任何帮助或方向将大大AP preciated：）

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

推荐答案

角执行消化函数来更新DOM当你的数据的变化。

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

摘要期间，人们重新计算在这种情况下，你已经在DOM绑定的所有值， {{RandomColorClass（）}} 。如果它们中的任何改变，所以再次执行摘要循环（因为一些变量可以取决于被改变的变量的值，例如）。

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.

发生的事情是，当发生摘要，你的 RandomColorClass（）函数被调用，并返回一个不同的值。这会触发额外的摘要，其中 RandomColorClass（）再次返回一个不同的值，这将触发另一摘要...

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(); 
});

和HTML：

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

这篇关于AngularJs - 错误：达到10 $摘要（）迭代。中止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！