9

我正在尝试使用 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() 迭代。中止！”。

我已经查看了有关该问题的其他帖子，但我无法弄清楚我需要更改哪些内容才能使其正常工作！？任何帮助或方向将不胜感激:)

4

4 回答 4

25

当你的数据发生变化时， 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>
于 2013-10-30T20:53:18.630 回答
5

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

window.location = "#route/yada";

将代码更改为

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

这解决了我的问题。=D

于 2014-01-12T20:25:03.660 回答
1

回答与这个特定问题无关，但我在这里添加它是因为当您搜索错误消息时它在 Google 首页上，我花了一点时间才弄明白：

在我看来，我有这样的事情：

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

并且自定义标签的控制器在$scope.data. 这导致 AngularJS 出错，因为每次重新检查它的值时，data它都会从视图中获取一个新对象（请记住，数组是一个对象），因此它永远无法正确消化它。

于 2013-12-05T13:27:15.447 回答
0

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

于 2015-09-23T18:31:39.510 回答