javascript - AngularJs - 错误 : 10 $digest() iterations reached. 中止

Question

我正在尝试使用 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();
};

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

Error: 10 $digest() iterations reached. Aborting!".

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

Answer 1

Angular 执行一个摘要函数来在你的数据改变时更新 DOM。

在摘要期间，它会重新计算您在 DOM 中绑定(bind)的所有值，在本例中为 {{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>