Angular - Fehler: 10 $ digest() Iterationen erreicht. Aborting

Question

ich versuche, eine Zufallszahl in meinem ng-src Weg zu bringen, wie folgt aus:

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

Und hier ist meine Grundfunktion in meinem Controller:

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

Die Bilder werden angezeigt, aber in der Konsole habe ich diesen Fehler:

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

ich viele Fragen auf, dass hier in Stackoverflow, aber ich noch loswerden kann nicht von diesem Fehler nicht gefunden. Danke für Ihre Hilfe.

Answer 1

Ihre Bindung ist zufällig, sie wird jedes Mal anders sein, wenn Angular den Beobachter dieser Bindung ausführt.

Allerdings stoppt Angular nur einen Digest-Zyklus, wenn es einen stabilen Zustand erreicht, in dem alle Beobachter zweimal hintereinander den gleichen Wert zurückgeben, was bei Ihrem niemals der Fall ist.

Kurz gesagt, Sie können keinen zufälligen Wert oder etwas, das immer anders ist, in einer angularen Bindung binden. Sie sollten Ihr Bild einmal generieren und es auf der Grundlage eines Ereignisses erneut zufällig anordnen.

$scope.randomPicture = generateRandomPicture(); 

Und

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

UPDATE: Nun, da: Und wenn Sie das Bild alle 3 Sekunden zum Beispiel aktualisieren möchten, können Sie

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

Update 2 hinzufügen Ich verstehe besser dein Problem, ich würde entweder vorschlagen, alles so zu behalten, wie es ist, aber benutze :: als wie unten gezeigt, wenn Sie mindestens Angular 1.3 verwenden. Auf diese Weise wird pro Benutzer ein zufälliges Bild generiert, das jedoch nur einmal generiert wird.

Auf einer früheren Version von Angular oder alternativ könnten Sie ein deterministisches Bild pro Benutzer generieren, das sich zufällig anfühlt. zum Beispiel in Ihren HTML-Einsatz:

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

Und in Ihrem Controller

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

---

Beachten Sie, dass, wenn Sie Angular 1.3+ verwenden und wollen nur das Bild einmal generieren, können Sie verwenden ONT Zeit Bindung mit der :: Syntax (mit dem gleichen Code für randomPicture):

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