Angular - 增加值会产生摘要错误

Question

我知道我遇到的问题，但我想不出解决办法。无论我做什么，我都会收到摘要错误。 我认为问题是在 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];
}

"Player" 包含一个 'position' 字段，可以是防御者或攻击者。 'getPlayerIcon' 方法将位置作为参数，然后创建一个具有该位置名称的范围变量，如果它是第一个遇到该位置的，则值为 1，如果是一个，则将其递增出现那个位置。

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

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

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

求助！

谢谢，首年

Answer 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 值并向其加一）。

Angular - 增加值会产生摘要错误

Angular - Incrementing value produces digest error

angularjs

angularjs-scope

ng-repeat

digest

angularjs-infdig