Comment confirmer que le rendu ng-repeat est terminé

Cette fois, je vais vous montrer comment confirmer que le rendu ng-repeat est terminé, et quelles sont les précautions pour confirmer que le rendu ng-repeat est terminé. Voici un cas pratique, prenons un. regarder.

Un certain projet, il y a un élément de liste <ul> dans ma page Web, le style est le suivant :

En fait, il passe par Angular - Formé par repeat, le code dans html est :

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

Créer une nouvelle liste button en bas de l'image. Après avoir cliqué, une nouvelle liste sera ajoutée à la. lists arraypush list objet, la page sera automatiquement rendue à ce moment-là, et un <li> sera également ajouté en conséquence, comme suit :

Notez que MyList1 est toujours dans l'état active (class="active"), mon exigence est qu'après avoir ajouté à list, définissez le nouveau list sur active, c'est-à-dire , après l'avoir ajouté, il deviendra le style suivant :

Au début j'ai essayé d'ajouter un nouvel objet button au tableau lists dans la fonction correspondant à push, puis utilisez <a href="http://www.php.cn/code/658.html" target="_blank">document<code>list.getElementById pour obtenir le nouveau <a href="http://www.php.cn/code/658.html" target="_blank">document</a>.getElementById objet, puis ajoute un <li>, et il a été constaté que l'objet class="active" obtenu était DOM Après null recherché , la raison a été trouvée : après être allé au array objet, le tableau a changé et tous les lists seraient restitués, recherchez l'objet push nouvellement ajouté immédiatement après que <li> soit terminé push n'a pas encore été rendu, donc il. ne peut être obtenu. La solution est : utilisez la commande <a href="http://www.php.cn/angularjs/angularjs-examples.html" target="_blank">AngularJS<code>DOM pour surveillerDOMQue le rendu soit terminé, une fois le rendu terminé, obtenez l'objet <a href="http://www.php.cn/angularjs/angularjs-examples.html" target="_blank">AngularJS</a> nouvellement ajouté. Il y a beaucoup de contenu associé sur ce site Web : ng-repeat<li>

Le. le code ci-dessus crée un objet nommé

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

instruction,

signifie que l'instruction est placée dans repeatFinish de restrict: "C" (sous forme de chameau, c'est-à-dire DOM), class signifie que le dernier objet a été rendu et la fonction class="repeat-finish" est exécutée à ce moment (définition Dans le scope.$last === true contrôleur change_list, la fonction consiste à annuler l'objet actuel , puis à définir le active entrant objet vers active). DOM peut obtenir directement l'élément active actuellement rendu. Notez que j'ai utilisé element[0] et exécuté DOM après $timeout, j'ai découvert que 10ms ne pouvait pas être trouvé si j'utilisais change_list directement. La raison est inconnue. change_listDOMJe 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 !

Lecture recommandée :

Vue.js+Flask pour créer une application d'une seule page (avec code)

Non utilisé Résumé des méthodes de détection de spécification de code vue

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!