AngularJs - 错误:10 $ digest()迭代达成.中止

Question

我正在尝试使用Angular创建Metro Tile类型网格,为了实现这一点,我希望每个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();
};

这一切都很好,瓷砖有不同的颜色,但我不断收到以下错误

错误:达到$ $ 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>

Answer 2

我在IE10中遇到了同样的问题,问题是我使用window.location重定向.

window.location = "#route/yada";

将代码更改为

$location.path("/route/yada);

这解决了我的问题.= d