Угловая - Ошибка: Достигнуты истребители $ $ digest(). Aborting

Question

я пытаюсь поставить случайное число в моем нг-Src пути, как это:

<div ng-repeat="user in users"> 
     <img ng-src="{{randomPicture()}}" alt=""> 
</div> 

И вот моя основная функция в моем контроллере: отображаются

$scope.randomPicture = function(){ 
    var PATH = 'assets/images/'; 
    var image = Math.floor((Math.random() * 12) + 1); 
    var ext = '.jpg'; 
    var randomPic = PATH + image + ext; 

    return randomPic; 
}; 

Изображения, но в консоли у меня есть эта ошибка:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 

я нашел много вопросов о том, что здесь, в StackOverflow, но я до сих пор не могу избавиться от этой ошибки. Спасибо за вашу помощь.

Answer 1

Ваша привязка будет случайной, она будет отличаться каждый раз, когда угловой будет выполнять наблюдателя этой привязки.

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

Одним словом, вы не можете привязывать случайное значение или что-либо, что всегда отличается друг от друга, в Угловой привязке. Вы должны сгенерировать свою картину один раз и, возможно, повторно рандомизировать ее на основе какого-либо события.

$scope.randomPicture = generateRandomPicture(); 

И

<img ng-src="{{randomPicture}}"> 

UPDATE: И если вы хотите, чтобы обновить картинку каждые 3 секунды в течение, например, вы можете добавить

// Generate a new random picture every 3 seconds 
$interval(function() { 
    $scope.randomPicture = generateRandomPicture(); 
}, 3000); 

Update 2: Теперь, Я лучше понимаю вашу проблему, я бы предлагал сохранить все как есть, но использовать :: как как показано ниже, при использовании, по крайней мере, Углового 1.3. Таким образом, у вас будет одно случайное изображение, созданное для каждого пользователя, но сгенерированное только один раз.

В более ранней версии Angular или, альтернативно, вы можете создать изображение детерминиста на пользователя, который будет чувствовать себя случайным. например, в вашем HTML использования:

<img ng-src="{{randomPicture($index)}}"> 

И в контроллере

var rand1 = Math.round(Math.random()*10); 
var rand2 = Math.round(Math.random()*10); 

$scope.randomPicture = function(index) { 
    var PATH = 'assets/images/'; 
    var image = (index+rand1*rand2)%13 + 1; 
    var ext = '.jpg'; 
    var randomPic = PATH + image + ext; 

    return randomPic; 
}; 

---

Обратите внимание, что если вы используете Угловое 1.3+ и только хотите создать картину один раз, вы можете использовать ОНТ время связывания с использованием :: синтаксиса (используя один и тот же код для randomPicture):

<img ng-src="{{::randomPicture()}}">