Angular - Błąd: Osiągnięto iteracje 10 $ digest(). Przerywanie

Question

próbuję umieścić losową liczbę całkowitą w mojej ścieżce ng-src, tak:

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

A oto moje podstawową funkcję w moim kontrolera: Wyświetlane są

$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; 
}; 

ilustracje ale w konsoli mam ten błąd:

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

znalazłem wiele pytań, na które tutaj w stackoverflow, ale nadal nie mogę pozbyć się tego błędu. Dzięki za pomoc.

Answer 1

Twoje powiązanie jest przypadkowe, będzie ono inne za każdym razem, gdy Angular wykona śledzenie tego powiązania.

Jednak kątowy zatrzymuje tylko cykl trawienia, gdy osiągnie stabilny stan, w którym wszyscy obserwatorzy zwracają tę samą wartość dwa razy z rzędu, co nigdy nie dzieje się z twoją.

Krótko mówiąc, nie można powiązać losowej wartości ani niczego, co jest zawsze inne, w wiązaniu kątowym. Powinieneś wygenerować swoje zdjęcie raz i opcjonalnie ponownie wybrać losowo na podstawie jakiegoś wydarzenia.

$scope.randomPicture = generateRandomPicture(); 

I

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

UPDATE: A jeśli chcesz odświeżyć obraz co 3 sekundy na przykład, można dodać

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

Aktualizacja 2: Teraz Rozumiem lepiej twój problem, albo sugerowałbym zachować wszystko tak, jak jest, ale użyć :: jako pokazane poniżej, jeśli używasz przynajmniej Angula 1.3. W ten sposób wygenerujesz jedno losowe zdjęcie na użytkownika, ale wygenerowane tylko raz.

Wcześniejsza wersja Angulara lub alternatywnie, można wygenerować deterministyczny obraz na użytkownika, który byłby losowy. na przykład w korzystaniu HTML:

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

aw kontrolerze

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; 
}; 

---

pamiętać, że jeśli używasz kątowe 1.3 + i chcą tylko, aby wygenerować obraz raz, można wykorzystać wiązanie ont czasie użyciu składni :: (przy użyciu tego samego kodu randomPicture):

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