AngularJs-错误：达到10次$ digest（）迭代。堕胎

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

这一切工作正常，并且图块具有不同的颜色，但我一直收到以下错误

错误：达到10个$ digest（）迭代。堕胎！”。

我看过有关此问题的其他帖子，但我不知道要使其正常工作需要进行哪些更改！？任何帮助或指示将不胜感激:)

Answer 1

当数据更改时，Angular执行 摘要 功能以更新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>