So hören Sie sich das Rendering mit AngularJS an

Dieses Mal zeige ich Ihnen, wie Sie AngularJS zum Überwachen des Renderings verwenden und welche Vorsichtsmaßnahmen für die Verwendung von AngularJS zum Überwachen des Renderings gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Eigentlich wird es durch ng-Angular von repeat gebildet, der Code in html lautet:

<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>

unten im Bild Erstellen eine neue Liste button. Nach dem Klicken wird ein neues lists-Objekt zum push-Array hinzugefügt. Zu diesem Zeitpunkt wird die Seite automatisch gerendert und ein list wird entsprechend hinzugefügt: <li>

Beachten Sie, dass sich

immer im Status MyList1 befindet (active). Meine Anforderung besteht darin, das neue class="active" auf list zu setzen, nachdem ich ein neues hinzugefügt habe list Das heißt, nach dem Hinzufügen erhält es den folgenden Stil: active

Zuerst habe ich versucht,

zum Array button hinzuzufügen die Funktion, die lists > entspricht. Verwenden Sie nach dem Erfassen des neuen push-Objekts list, um das neue document.getElementById-Objekt abzurufen, und fügen Sie dann ein <li> hinzu. Es stellt sich heraus, dass es sich um das erhaltene class="active"-Objekt handelt ist DOM. Nach der Suche habe ich Folgendes gefunden: Nach dem Hinzufügen von null zum Array lists wird das Array geändert und alle push werden neu gerendert Das neu hinzugefügte <li>-Objekt wurde sofort hinzugefügt und push wurde noch nicht gerendert. Okay, es ist also nicht verfügbar. Die Lösung lautet: Verwenden Sie den Befehl DOM, um zu überwachen, ob DOM gerendert wurde. Rufen Sie das neu hinzugefügte AngularJS-Objekt ab. Es gibt viele verwandte Inhalte im Internet folgt: ng-repeat

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

<li>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS, um einen schwebenden Ebeneneffekt anzuzeigen, wenn die Maus über Text fährt

Anleitung Verwenden Sie die Winkelkomponenteninteraktion

Das obige ist der detaillierte Inhalt vonSo hören Sie sich das Rendering mit AngularJS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!