Ich habe den folgenden Code, der den Namen des Benutzers und seine Punktzahl wiederholt und anzeigt:
<div ng-controller="AngularCtrl" ng-app>
<div ng-repeat="user in users | orderBy:predicate:reverse | limitTo:10">
<div ng-init="user.score=user.id+1">
{{user.name}} and {{user.score}}
</div>
</div>
</div>
Und der entsprechende Winkelregler.
function AngularCtrl($scope) {
$scope.predicate = 'score';
$scope.reverse = true;
$scope.users = [{id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}, {id: 11, name: 'John'}, {id: 1, name: 'John'}, {id: 2, name: 'Ken'}, {id: 3, name: 'smith'}, {id: 4, name: 'kevin'}, {id: 5, name: 'bob'}, {id: 6, name: 'Dev'}, {id: 7, name: 'Joe'}, {id: 8, name: 'kevin'}, {id: 9, name: 'John'}, {id: 10, name: 'Ken'}]
}
Wenn ich den obigen Code ausführe, wird der Fehler angezeigt: 10 $ Digest () - Iterationen erreicht. Abbruch! Fehler in meiner Konsole.
Ich habe jsfiddle dafür erstellt.
Das Sortierprädikat wird nur innerhalb der ng-Wiederholung initialisiert und auch die Anzahl der Objekte wird begrenzt. Daher denke ich, dass es der Grund für den Fehler ist, sowohl die sortby- als auch die limitTo-Beobachter zusammen zu haben.
Wenn $ scope.reverse false ist (aufsteigende Reihenfolge der Punktzahl), tritt kein Fehler auf.
Kann mir jemand helfen zu verstehen, was hier falsch ist? Vielen Dank für Ihre Hilfe.
angularjs
javascript-framework
Molliger Junge
quelle
quelle
Antworten:
Bitte überprüfen Sie diese jsFiddle . (Der Code ist im Grunde der gleiche, den Sie gepostet haben, aber ich verwende ein Element anstelle des Fensters, um die Bildlaufereignisse zu binden.)
Soweit ich sehen kann, gibt es kein Problem mit dem von Ihnen geposteten Code. Der von Ihnen erwähnte Fehler tritt normalerweise auf, wenn Sie eine Schleife von Änderungen über eine Eigenschaft erstellen. Beispiel: Wenn Sie nach Änderungen an einer bestimmten Eigenschaft suchen und dann den Wert dieser Eigenschaft im Listener ändern:
Dies führt zu einer Fehlermeldung:
Stellen Sie sicher, dass Ihr Code keine solchen Situationen aufweist.
aktualisieren:
Das ist Dein Problem:
Sie sollten Objekte / Modelle während des Renderns oder auf andere Weise nicht ändern, da dies ein neues Rendern erzwingt (und folglich eine Schleife , die die 'Fehler: 10 $ Digest () - Iterationen erreicht. Abbrechen!' ).
Wenn Sie das Modell aktualisieren möchten, tun Sie dies auf dem Controller oder in einer Direktive, niemals in der Ansicht. AngularJS Dokumentation empfiehlt nicht zu verwenden , die
ng-init
genau diese Art von Situationen zu vermeiden:Hier ist eine jsFiddle mit einem funktionierenden Beispiel.
quelle
angular.element(w).bind()
Ihrer Information, anstatt Sie können verwendenelement.bind()
.Die Ursache für diesen Fehler war für mich ...
in meiner Vorlage
Dadurch wird die Funktion myTrustSrc in meinem Controller in einer Endlosschleife aufgerufen. Wenn ich das ng-if aus dieser Zeile entferne, ist das Problem gelöst.
Die Funktion wird nur einige Male aufgerufen, wenn ng-if nicht verwendet wird. Ich frage mich immer noch, warum die Funktion mit ng-src mehrmals aufgerufen wird.
Dies ist die Funktion in der Steuerung
quelle
Für mich war es so, dass ich ein Funktionsergebnis als 2-Wege-Bindungseingabe '=' an eine Direktive übergab, die jedes Mal ein neues Objekt erstellte.
also hatte ich so etwas:
und die Controller-Methode auf my-dir war
was als ich gemacht habe
Problem gelöst!
Hoffentlich hilft das jemandem :)
quelle
Ich habe ein anderes Beispiel für etwas, das dies verursacht hat. Hoffentlich hilft es als zukünftige Referenz. Ich verwende AngularJS 1.4.1.
Ich hatte dieses Markup mit mehreren Aufrufen einer benutzerdefinierten Direktive:
myData
ist ein Array undWhere()
eine Erweiterungsmethode, die über das Array iteriert und ein neues Array zurückgibt, das alle Elemente aus dem Original enthält, wobei die IsOpen-Eigenschaft mit dem Bool-Wert im zweiten Parameter übereinstimmt.In der Steuerung habe ich so eingestellt
$scope.data
:Where()
Das Problem war das Aufrufen der Erweiterungsmethode aus der Direktive wie im obigen Markup. Um dieses Problem zu beheben, habe ich den Aufruf der Erweiterungsmethode anstelle des Markups in den Controller verschoben:und der neue Controller-Code:
quelle
Ziemlich spät zur Party, aber mein Problem trat auf, weil es einen Defekt im UI-Router in Winkel 1.5.8 gibt. Zu erwähnen ist, dass dieser Fehler nur beim ersten Ausführen der Anwendung aufgetreten ist und danach nicht mehr auftritt. Dieser Beitrag von Github hat mein Problem gelöst. Grundsätzlich besteht der Fehler darin, dass
$urlRouterProvider.otherwise("/home")
die Lösung eine Problemumgehung wie die folgende war:quelle
Ignorieren Sie zunächst alle Antworten mit der Aufforderung, $ watch zu verwenden. Angular arbeitet bereits mit einem Hörer. Ich garantiere Ihnen, dass Sie die Dinge komplizieren, indem Sie nur in diese Richtung denken.
Ignorieren Sie alle Antworten, die Sie dem Benutzer $ timeout mitteilen. Sie können nicht wissen, wie lange das Laden der Seite dauern wird, daher ist dies nicht die beste Lösung.
Sie müssen nur wissen, wann das Rendern der Seite abgeschlossen ist.
Verfolgen Sie die ng-Wiederholung durch $ index und wenn die Länge des Arrays gleich dem Index ist, stoppen Sie die Schleife und führen Sie Ihre Logik aus.
jsfiddle
quelle
Ich habe diesen Fehler im Zusammenhang mit der Winkelbaumsteuerung erhalten. In meinem Fall waren es die Baumoptionen. Ich habe treeOptions () von einer Funktion zurückgegeben. Es wurde immer das gleiche Objekt zurückgegeben. Aber Angular denkt auf magische Weise, dass es sich um ein neues Objekt handelt, und startet dann einen Verdauungszyklus. Rekursion von Digests verursachen. Die Lösung bestand darin, die treeOptions an den Bereich zu binden. Und weisen Sie es nur einmal zu.
quelle
Es ist komisch ... Ich habe genau den gleichen Fehler, der von einer anderen Sache herrührt. Beim Erstellen meines Controllers habe ich den Parameter $ location wie folgt übergeben:
Dies hat sich als Fehler erwiesen, wenn wir Bibliotheken von Drittanbietern oder reines JS verwenden, um einige Details zu manipulieren (hier window.location). Der nächste Digest von Angular wird diesen Fehler auslösen.
Also habe ich einfach die Position $ aus dem Parameter für die Controller-Erstellung entfernt und es hat wieder funktioniert, ohne diesen Fehler. Oder wenn Sie unbedingt die Position $ aus dem Winkel verwenden müssen, müssen Sie jeden einzelnen
<a href="#">link</a>
in den Links Ihrer Vorlagenseite entfernen und stattdessen href = "" schreiben . Hat für mich gearbeitet.Hoffe es kann eines Tages helfen.
quelle
Wenn Sie Angular verwenden, entfernen Sie das ng-Speicherprofil von Ihrer Browserkonsole. Es ist keine allgemeine Lösung. In meinem Fall hat es funktioniert.
In Chrome F12-> Ressourcen-> Lokaler Speicher
quelle
Dies passierte mir direkt nach dem Upgrade von Firefox auf Version 51. Danach
clearing the cache
ist das Problem behoben.quelle
Ich hatte den ähnlichen Fehler, weil ich definiert hatte
anstatt
quelle
Dies geschah mir nach dem Upgrade von Angular 1.6 -> 1.7, wenn $ sce.trustAsResourceUrl () als Rückgabewert einer von ng-src aufgerufenen Funktion verwendet wurde. Sie können dieses hier erwähnte Problem sehen .
In meinem Fall musste ich Folgendes ändern.
zu
quelle
Ich habe mit AngularJS 1.3.9 genau den gleichen Fehler erhalten, als ich in meinem benutzerdefinierten Sortierfilter Array.reverse () aufgerufen habe.
Nachdem ich es entfernt hatte, war es gut.
quelle