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

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

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

Answer 2

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

window.location = "#route/yada";

将代码更改为

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

这解决了我的问题。 = d

Answer 3

与此特定问题无关的答案，但我在此处添加，因为当您搜索错误消息时它位于Google首页上，直到我弄明白它才花了我一点时间：

我认为我有这样的事情：

<custom-tag data="[1,2,3]"/>

自定义标记的控制器在$scope.data上设置了观察程序。这导致AngularJS变为barf，因为每次重新检查data的值时，它从视图中获得了一个新对象（记住，数组是一个对象），所以它从未正确地完成消化。

Answer 4

当我输错了ng-class =“submit（）”而不是ng-click =“submit（）”时，我遇到了这个错误。我无法想象其他人会犯这样一个愚蠢的错误，但是为了记录，这是另一种创建10 $ digest（）迭代中止的方法！

AngularJs - 错误：10 $ digest（）迭代达成。中止

4 个答案: