AngularJS无限$digest循环错误问题求助

这个问题我之前也踩过坑！核心原因是你在模板表达式里调用了一个会修改$scope变量的函数，直接触发了AngularJS的无限digest循环，咱们一步步拆解解决：

问题根源 #

AngularJS的digest循环是用来保证视图和数据模型同步的——每次digest都会重新计算所有绑定的表达式，检查是否有数据变化。你在data-focusable-depth="{{getTotalDepths($index)}}"里调用的getTotalDepths函数，每次执行时（当index和tempIndex不相等时）都会修改$scope.totalDepths的值。这会让AngularJS认为模型还在变化，于是立刻启动新一轮digest循环，结果又会再次调用函数、修改值，陷入无限循环，直到触发框架的保护机制抛出[$rootScope:infdig]错误。

解决方案：提前计算深度值，避免模板中修改模型 #

正确的思路是提前把每个item的深度值计算好，直接挂载到items数组的每个元素上，模板只需要读取预计算好的属性即可，这样就不会在digest循环中修改模型了。

修改后的控制器代码 #

把计算深度的逻辑移到数据初始化阶段，预处理items数组：

// 假设你的items数据已经获取完成
$scope.items = yourItemsData;
$scope.totalDepths = -1;
var tempIndex = -1;

// 为每个item添加预计算的depth属性
angular.forEach($scope.items, function(item, index) {
  if (tempIndex !== index) {
    tempIndex = index;
    $scope.totalDepths += 1;
  }
  // 把计算好的深度绑定到当前item上
  item.depth = $scope.totalDepths;
});

修改后的HTML模板 #

直接使用预计算的item.depth，不再调用会修改模型的函数：

<div style="display: inline-block;" ng-repeat="item in items">
  <div class="item-list" focusable data-focusable-depth="{{item.depth}}">
    <img class="img-fluid" ng-src="{{item.picture}}" />
  </div>
</div>

为什么这样能解决问题？ #

预处理阶段只会计算一次每个item的深度值，之后模板里只是读取已经存在的属性，不会在digest循环中修改任何$scope变量。AngularJS在digest时检查表达式，发现值没有变化，就会正常结束循环，不会再触发无限循环了。

内容的提问来源于stack exchange，提问作者iSpithash