Comment écouter le rendu à l'aide d'AngularJS

Cette fois, je vais vous montrer comment utiliser AngularJS pour surveiller le rendu, et quelles sont les précautions à prendre pour utiliser AngularJS pour surveiller le rendu. Ce qui suit est un cas pratique, jetons un coup d'œil.

En fait, il est formé par ng-Angular de repeat, le code dans html est :

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

Fig Cliquez. sur la nouvelle liste button en bas du milieu pour ajouter un nouvel objet lists au tableau push À ce moment, la page sera automatiquement rendue et un list sera ajouté en conséquence, comme suit. : <li>

Notez que

est toujours dans le statut de MyList1 (active) Mon exigence est de définir le nouveau class="active" sur list 🎜>, c'est-à-dire qu'après l'avoir ajouté, il devient le style suivant : listactive

Au début, j'ai essayé de l'ajouter au tableau

dans le fonction correspondant à

Après que button a acquis un nouvel objet lists, utilisez push pour obtenir l'objet list nouvellement ajouté, puis ajoutez-y un document.getElementById Il s'avère que le l'objet est <li>. La recherche a révélé que la raison est la suivante : après avoir ajouté des objets class="active" au tableau DOM, le tableau change et tous les null seront restitués. Une fois lists terminé, regardez immédiatement. pour les objets push nouvellement ajoutés, et <li> est toujours là. Il n'est pas bien rendu, il ne peut donc pas être obtenu. La solution est la suivante : utilisez la commande push pour vérifier si DOM a été rendu. Une fois le rendu terminé, récupérez l'objet DOM nouvellement ajouté. Il existe de nombreux contenus associés sur Internet. suit : AngularJSng-repeat<li>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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

Lecture recommandée :

JS pour faire apparaître un effet de calque flottant lorsque la souris passe sur le texte

Comment utiliser l'interaction des composants angulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!