Получить случайное число в ng-repeat угловое

Question

Мне нужно получить случайное число в моем цикле. Я попробовал это в моем шаблоне:

<div ng-app="app" ng-controller="Base" > 
    <div ng-repeat="item in items"> 
     <img ng-src="/img/img{{getRandomImg()}}.png"> 
    </div> 
    </div> 

и функции в моей базе контроллера:

$scope.getRandomImg = function(){ 
    return Math.floor((Math.random()*3)+1); 
} 

Когда моя страница загружается у меня есть ошибка: $ rootScope: infdig Бесконечные $ дайджеста Loop

Я также попытался сделать это с директивой

app.directive('randomImage', [ 
    function() { 
     return { 
      restrict: 'A', 
      link: function($scope, element, attrs) { 
       var rand = Math.floor((Math.random()*3)+1); 

       $(element).attr('src', '/img/tracks/trackimg'+rand+'.png'); 
      } 
     } 

    } 
]); 

И в моем шаблоне:

<div ng-app="app" ng-controller="Base" ng-repeat="item in items"> 
     <img data-random-image=""> 
</div> 

Он работает почти правильно. НО, когда я обновляю items, в моем контроллере нет повторно созданных изображений, но они остаются неизменными. Зачем?

Answer 1

Это из угловой документации:

«Эта ошибка возникает, когда модель приложения становится неустойчивой, и каждый $ переваривать цикл вызывает изменение состояния и последующие $ переваривать цикл Угловые обнаруживает эту ситуацию и предотвращает зацикливание от порождения. браузер не должен реагировать.

Например, ситуация может возникнуть путем настройки часов на пути и последующего обновления одного и того же пути при изменении значения. "

<div ng-repeat="user in getUsers()">{{ user.name }}</div> 

... 

$scope.getUsers = function() { 
    return [ { name: 'Hank' }, { name: 'Francisco' } ]; 
}; 

Проблема в вашем массиве «предметов». Прочитайте это: https://docs.angularjs.org/error/ $ rootScope/infdig

Answer 2

Я считаю, что ваша проблема вы повторяете ng-controller & ng-app директиву слишком много раз, используя ng-repeat

<div ng-app="app" ng-controller="Base"> 
    <div ng-repeat="item in items"> 
     <img data-random-image=""> 
    </div> 
</div>