AngularJS überwacht, ob das NG-Repeat-Rendering abgeschlossen ist? Details zum betreffenden Prozess finden Sie hier

Dieser Artikel soll ein Problem vorstellen und natürlich einige Probleme lösen. Er stellt ein Beispiel für die Überwachung des Abschlusses des NG-Repeat-Renderings vor. Für ein bestimmtes Projekt gibt es auf meiner Webseite ein Listenelement

mit folgendem Stil:

<ul></ul>

Eigentlich Es wird durch ng-

von

gebildet, der Code in Angular lautet: repeat

<li>{{ list.name }} htmlErstellen Sie eine neue Liste am unteren Rand des Bildes, klicken Sie darauf und gehen Sie zu

Arraybutton Ein neues lists-Objekt wird erstellt. Zu diesem Zeitpunkt wird die Seite automatisch gerendert und ein push wird entsprechend hinzugefügt, wie folgt: list<li>

Hinweis

Es befindet sich immer im Status

(MyList1Meine Anforderung ist, das neu hinzugefügte active danach auf class="active" zu setzen). Durch Hinzufügen erhält man den folgenden Stil: listlistactive

Zuerst habe ich versucht, zum Array in der entsprechenden Funktion hinzuzufügen

Nachdem Sie das neue

-Objekt erhalten haben, verwenden Sie button, um das neue lists-Objekt abzurufen, und fügen Sie dann ein push hinzu. Es stellt sich heraus, dass das erhaltene list-Objekt document.getElementById ist. Nach der Suche habe ich den Grund gefunden: Ja: Nachdem <li> zum class="active"-Array DOM-Objekt gegangen ist, ändert sich das Array und alle null werden neu gerendert. Nachdem abgeschlossen ist, gehen Sie sofort zu Das neu hinzugefügte lists-Objekt und push werden weiterhin verwendet. Es wird nicht gut gerendert und kann daher nicht abgerufen werden. <li>Die Lösung ist: pushVerwenden Sie den Befehl DOM, um zu überwachen, ob DOM abgeschlossen ist. Rufen Sie nach Abschluss des Renderings das neu hinzugefügte -Objekt ab , gehen Sie hier zu PHP Chinesische Website AngularJSAngularJS-Entwicklungshandbuch ng-repeat) Auf dieser Website gibt es viele verwandte Inhalte. Der Code lautet wie folgt: <li>

myapp.directive('repeatFinish', function ($timeout) {
    return {
        restrict: "C",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                $timeout(function () {
                    scope.change_list(element[0]);
                }, 10);
            }
        }
    }
});

Der obige Code erstellt einen Befehl mit dem Namen , Zeigt an, dass die Anweisung in

von

platziert ist (in Kamelfallform, d. h. repeatFinish zeigt an, dass das letzte Objekt zu diesem Zeitpunkt gerendert wurde). 🎜>-Funktion (im Controller definiert, die Funktion besteht darin, das aktuelle restrict: "C"-Objekt abzubrechen DOM und dann das eingehende class-Objekt auf class="repeat-finish" zu setzen, um das aktuell gerenderte Element. scope.$last === trueBeachten Sie, dass ich change_list verwendet und active nach active ausgeführt habe. Ich habe festgestellt, dass DOM nicht gefunden werden konnte, wenn ich active direkt verwendet habe. Kann jemand diese Frage beantworten? element[0]DOMDieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website $timeoutAngularJS-Benutzerhandbuch 10ms, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie eine hinterlassen). Nachricht unten. change_listchange_listDOM

Das obige ist der detaillierte Inhalt vonAngularJS überwacht, ob das NG-Repeat-Rendering abgeschlossen ist? Details zum betreffenden Prozess finden Sie hier. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!