Angular JS: ошибка: $ rootScope: infdig Бесконечный цикл $ digest

Question

у меня появляется эта ошибка, когда я помещаю в контроллер

"$ 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>

Answer 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>