Angular - 递增值会产生摘要错误答案

【问题标题】：Angular - Incrementing value produces digest errorAngular - 递增值会产生摘要错误
【发布时间】：2016-07-01 21:06:30
【问题描述】：

我知道我遇到的问题，但我想不出解决办法。无论我做什么，我都会收到一个摘要错误。 我认为问题在于在 ng-repeat 中调用“getPlayerIcon”方法。

HTML：

 <div class="col-md-2" ng-repeat="player in team.players">
   <img class="card-img-player" ng-src="/{{player.position}}/{{getPlayerIcon(player.position)}}" data-holder-rendered="true" style="height: 270px; width: 100%; display: block;">
 </div>

AngularJS：

$scope.getPlayerIcon = function(position) {
 if ($scope[position] === undefined)
   $parse(position).assign($scope, 1);

$scope[position]++;
return $scope[position];
}

“玩家”包含一个“位置”字段，可以是防御者或攻击者。 'getPlayerIcon' 方法将位置作为参数，然后创建一个具有该位置名称的作用域变量，如果它是第一个遇到该位置的值，则值为 1，或者如果出现那个位置。

我遇到的问题是每次在 ng-repeat 中调用 ng-src 上的方法都会更改值，这会导致臭名昭著的 indig digest 错误：

angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest - `iterations reached. Aborting!`

我该如何解决这个问题？我必须递增，因为例如，如果 team.players 中有 4 名防守者和 4 名攻击者，我希望能够使用 Defender/1、Defender/2、Defender/3、Defender/4、Attacker/ 加载图像1、攻击者/2、攻击者/3、攻击者/4。基本上我需要它来识别位置，并计算该位置以提取正确的图像。

救命！

谢谢，元年

【问题讨论】：

每次角度检查时值都会发生变化，因此它永远不会说“OK，它很稳定”并停止。你必须改变它。
真的需要了解一下摘要循环的工作原理
我明白，这是我不确定的解决方法。我如何在不更改值的情况下执行此操作，因为我需要..？
@fypfyp 你的代码永远不会像实现的那样工作，因为即使不是因为这个问题，角度也会一遍又一遍地调用你的方法。您需要弄清楚在什么情况下需要增加数字，然后在那里执行，而不是根据角度查看当前值的无意义事件来增加它。
重新设计你的整个逻辑，不需要更改名称以get 开头的函数中的值，这是每种语言都必须的。特别是在这里，在读取范围的同时更改范围是一个糟糕的主意。

标签： angularjs angularjs-scope ng-repeat digest angularjs-infdig

【解决方案1】：

只需使用$index。

 <div class="col-md-2" ng-repeat="player in team.players track by $index">
   <img class="card-img-player" ng-src="/{{player.position}}/{{getPlayerIcon(player.position, $index)}}" data-holder-rendered="true" style="height: 270px; width: 100%; display: block;">
 </div>

这将为您提供循环中当前迭代的索引，然后无需在您的方法中进行增量（您可以传入 $index 值并为其加一）。

【讨论】：