Angular JS：错误：$rootScope:infdig 无限 $digest 循环答案

【问题标题】：Angular JS : Error: $rootScope:infdig Infinite $digest LoopAngular JS：错误：$rootScope:infdig 无限 $digest 循环
【发布时间】：2018-11-06 15:28:07
【问题描述】：

当我放入控制器时出现此错误

"$rootScope:infdig 无限 $digest 循环"

控制器：

$scope.List = ["hello", "patrick", "daniel", " jemmy", "lara", "said", "charle", "ridha.", "radhi", "fred"
  $scope.GetRandomListName = function() {
    return $scope.List[Math.floor((Math.random() * List.lenght))];
  }
];

CHTML：

<div class="row">
  <blockquote>
    {{GetRandomListName()}}
  </blockquote>
</div>

【问题讨论】：

欢迎来到 SO。请提供一个最小、完整和可验证的示例。向我们展示您最近尝试的代码以及您遇到的问题。并解释为什么结果不符合您的预期。编辑您的问题以包含错误消息和位置，请不要在评论中添加它，因为它可能不可读。 stackoverflow.com/help/mcve
您能为此分享 jsfiddle 或 plukr 吗？
你好，这是 jsfiddler 的链接：jsfiddle.net/9dq81pn4
你有什么想法吗

标签： angularjs

【解决方案1】：

AngularJS 调用GetRandomListName 不是一次，而是多次调用，直到结果相同。在你的情况下，你无法实现它，因为你的函数每次都会生成随机数，它会导致 "$rootScope:infdig Infinite $digest Loop"。所以，你应该cache 结果 - 为此你还应该提供参数（index），因为你可以有多个{{GetRandomListName}} 表达式，你应该跟踪cache[index] 和对应的{{GetRandomListName(index)}} 之间的关系：

angular.module('app', []).controller('ctrl', function($scope){
  $scope.List = [];
  for(var i = 0; i < 100; i++)
    $scope.List.push(i);
    
  var cache = [];
  $scope.GetRandomListName = function(index) {            
    return cache[index] 
      || (cache[index] = $scope.List[Math.floor((Math.random() * $scope.List.length))]);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <p>First: {{GetRandomListName(0)}}</p>
  <p>Second: {{GetRandomListName(1)}}</p>
</div>

【讨论】：