In der Tat sollten Sie Direktiven verwenden, und es gibt kein Ereignis, das an das Ende einer ng-Repeat-Schleife gebunden ist (da jedes Element einzeln erstellt wird und ein eigenes Ereignis hat). Aber a) die Verwendung von Anweisungen ist möglicherweise alles, was Sie benötigen, und b) es gibt einige ng-Repeat-spezifische Eigenschaften, mit denen Sie Ihr Ereignis "on ngRepeat beendet" ausführen können.
Wenn Sie lediglich Ereignisse für die gesamte Tabelle formatieren / hinzufügen möchten, können Sie dies in einer Direktive tun, die alle ngRepeat-Elemente umfasst. Wenn Sie andererseits jedes Element spezifisch ansprechen möchten, können Sie eine Anweisung innerhalb von ngRepeat verwenden, die nach ihrer Erstellung auf jedes Element einwirkt.
Dann gibt es die $index
, $first
, $middle
und $last
Eigenschaften können Sie auf Triggerereignisse verwenden. Also für diesen HTML:
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
Sie können Anweisungen wie folgt verwenden:
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
Sehen Sie es in Aktion in diesem Plunker . Ich hoffe es hilft!
myMainDirective
Code erst nach dem Ende der Schleife ausführen lassen? Ich muss die Bildlaufleiste des übergeordneten Div aktualisieren.Wenn Sie einfach am Ende der Schleife Code ausführen möchten, finden Sie hier eine etwas einfachere Variante, für die keine zusätzliche Ereignisbehandlung erforderlich ist:
Sehen Sie sich eine Live-Demo an.
quelle
Es ist nicht erforderlich, eine Richtlinie zu erstellen, insbesondere nicht, um eine
ng-repeat
vollständige Veranstaltung zu haben .ng-init
macht die Magie für dich.Das
$last
stellt sicher, dass diesfinished
nur ausgelöst wird, wenn das letzte Element in das DOM gerendert wurde.Vergessen Sie nicht, ein
$scope.finished
Ereignis zu erstellen .Viel Spaß beim Codieren !!
EDIT: 23. Oktober 2016
finished
Wenn Sie die Funktion auch aufrufen möchten, wenn sich kein Element im Array befindet, können Sie die folgende Problemumgehung verwendenFügen Sie einfach die obige Zeile oben im
ng-repeat
Element hinzu. Es wird geprüft, ob das Array keinen Wert hat, und die Funktion entsprechend aufgerufen.Z.B
quelle
Hier ist eine Wiederholungsanweisung, die eine bestimmte Funktion aufruft, wenn sie wahr ist. Ich habe festgestellt, dass die aufgerufene Funktion $ timeout mit Intervall = 0 verwenden muss, bevor eine DOM-Manipulation durchgeführt wird, z. B. das Initialisieren von QuickInfos für die gerenderten Elemente. jsFiddle: http://jsfiddle.net/tQw6w/
Versuchen Sie in $ scope.layoutDone, die $ timeout-Zeile zu kommentieren und "NOT CORRECT!" Linie, um den Unterschied in den QuickInfos zu sehen.
JS:
quelle
Hier ist ein einfacher Ansatz
ng-init
, für den nicht einmal eine benutzerdefinierte Direktive erforderlich ist. In bestimmten Szenarien hat es gut funktioniert, z. B. wenn beim Laden einer Seite ein Teil von ng-wiederholten Elementen automatisch zu einem bestimmten Element gescrollt werden muss. Die Bildlauffunktion muss also warten, bis dasng-repeat
Rendern im DOM abgeschlossen ist, bevor es ausgelöst werden kann.Beachten Sie, dass dies nur für Funktionen nützlich ist, die Sie nach dem ersten Rendern von ng-repeat einmal aufrufen müssen. Wenn Sie eine Funktion aufrufen müssen, wenn der Inhalt von ng-repeat aktualisiert wird, müssen Sie eine der anderen Antworten in diesem Thread mit einer benutzerdefinierten Anweisung verwenden.
quelle
Als Ergänzung zu Pavel's Antwort wäre etwas Lesbareres und leicht verständlicheres:
Warum
angular.noop
gibt es das überhaupt noch ...?Vorteile:
Sie müssen dafür keine Direktive schreiben ...
quelle
ng-init="$last && doSomething( )"
Vielleicht ein etwas einfacherer Ansatz mit
ngInit
und Lodashsdebounce
Methode ohne die Notwendigkeit einer benutzerdefinierten Direktive:Regler:
Vorlage:
Aktualisieren
Es gibt eine noch einfachere reine AngularJS-Lösung mit ternärem Operator:
Vorlage:
Beachten Sie, dass ngInit die Kompilierungsphase vor dem Link verwendet, dh der Ausdruck wird aufgerufen, bevor untergeordnete Anweisungen verarbeitet werden. Dies bedeutet, dass möglicherweise noch eine asynchrone Verarbeitung erforderlich ist.
quelle
ng-init="$last ? refresh() : false"
. Und das erfordert nicht einmal Lodash.Es kann auch erforderlich sein, wenn Sie die
scope.$last
Variable überprüfen , um Ihren Trigger mit einem zu versehensetTimeout(someFn, 0)
. AsetTimeout 0
ist eine akzeptierte Technik in Javascript und es war unerlässlich, dass ichdirective
richtig lief.quelle
Dies ist eine Verbesserung der Ideen, die in anderen Antworten zum Ausdruck gebracht wurden, um zu zeigen, wie Sie Zugriff auf die ngRepeat-Eigenschaften ($ index, $ first, $ middle, $ last, $ even, $ odd) erhalten, wenn Sie deklarative Syntax verwenden und den Bereich isolieren ( Google hat Best Practice empfohlen) mit einer Element-Direktive. Beachten Sie den Hauptunterschied :
scope.$parent.$last
.quelle
Ich habe es so gemacht.
Erstellen Sie die Direktive
Nachdem Sie es auf dem Etikett hinzugefügt haben, wo diese ng-Wiederholung
Und fertig damit wird am Ende der ng-Wiederholung ausgeführt.
quelle
Meine Lösung bestand darin, ein div hinzuzufügen, um eine Funktion aufzurufen, wenn das Element das letzte in einer Wiederholung war.
quelle
Ich möchte eine weitere Antwort hinzufügen, da die vorhergehenden Antworten davon ausgehen, dass der Code, der nach der Ausführung von ngRepeat ausgeführt werden muss, ein Winkelcode ist. In diesem Fall bieten alle obigen Antworten eine großartige und einfache Lösung, von denen einige allgemeiner sind als andere. und falls es für die Phase des Digest-Lebenszyklus wichtig ist, können Sie einen Blick auf Ben Nadels Blog werfen , mit der Ausnahme, dass Sie $ parse anstelle von $ eval verwenden.
Aber meiner Erfahrung nach werden, wie das OP feststellt, normalerweise einige JQuery-Plugins oder -Methoden auf dem endgültig kompilierten DOM ausgeführt. In diesem Fall stellte ich fest, dass die einfachste Lösung darin besteht, eine Direktive mit einem setTimeout zu erstellen, da die setTimeout-Funktion gepusht wird Bis zum Ende der Warteschlange des Browsers ist es immer richtig, nachdem alles in einem Winkel ausgeführt wurde, normalerweise ngReapet, das nach der PostLinking-Funktion seiner Eltern fortgesetzt wird
Für alle, die sich fragen, warum sie in diesem Fall nicht $ timeout verwenden sollten, ist dies ein weiterer Verdauungszyklus, der völlig unnötig ist
quelle
Ich musste Formeln mit MathJax rendern, nachdem ng-repeat beendet war. Keine der obigen Antworten löste mein Problem, also machte ich wie unten. Es ist keine schöne Lösung , hat aber für mich funktioniert ...
quelle
Ich fand hier eine gut geübte Antwort , aber es war immer noch notwendig, eine Verzögerung hinzuzufügen
Erstellen Sie die folgende Direktive:
Fügen Sie es Ihrem Repeater als Attribut hinzu:
Laut Radu:
Bei mir funktioniert es, aber ich muss noch ein setTimeout hinzufügen
quelle
Wenn Sie den Klassennamen einfach so ändern möchten, dass er anders gerendert wird, reicht der folgende Code aus.
Dieser Code funktionierte für mich, als ich eine ähnliche Anforderung hatte, um den eingekauften Artikel in meiner Einkaufsliste in Strick-Trough-Schrift zu rendern.
quelle