AngularJS écoute si le rendu ng-repeat est terminé ? Voici les détails du processus en question

Cet article est destiné à présenter un problème, et bien sûr, il peut résoudre certains problèmes. Il présente un exemple de angularjs surveillant l'achèvement du rendu ng-repeat. Les amis intéressés peuvent y jeter un œil.

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

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

<li>{{ list.name }}

Créez une nouvelle liste button en bas de l'image, cliquez dessus et allez sur le lists tableaupushUn nouvel objet list est créé à ce moment, la page sera automatiquement rendue, et un <li> sera ajouté en conséquence, comme suit :

Remarque MyList1 a toujours été dans le statut active (class="active" Mon exigence est de définir le list nouvellement ajouté sur list après avoir ajouté un nouveau active Ensuite, cela devient le style suivant :

Au début, j'ai essayé d'ajouter

au <.> arraybutton 🎜>Après avoir acquis le nouvel objet lists, utilisez push pour obtenir le nouvel objet list, puis ajoutez-y un document.getElementById Il s'avère que. l'objet <li> obtenu est class="active". Après la recherche, la raison est trouvée : après que DOM soit transféré à l'objet null tableau, le tableau change et tout lists sera re- rendu. Une fois push terminé, recherchez immédiatement l'objet <li> nouvellement ajouté, pushIl n'a pas encore été rendu, il ne peut donc pas être obtenu. DOMLa solution est la suivante : DOMUtilisez la commande pour vérifier si est terminé. Une fois le rendu terminé, récupérez l'objet AngularJS nouvellement ajouté ng-repeat (si vous souhaitez en voir plus. , allez ici Site Web PHP chinois <li>Manuel de développement AngularJS ) Il y a beaucoup de contenu associé sur ce site Web Le code est le suivant :

Le code ci-dessus crée une commande nommée <.>,

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

signifie que l'instruction est placée dans

de repeatFinish (étui chameau, c'est-à-dire restrict: "C"), DOM signifie que le dernier objet a été rendu, et la fonction class (défini dans le contrôleur, fonction Il s'agit d'annuler le class="repeat-finish" de l'objet scope.$last === true actuel, puis de définir l'objet change_list entrant sur active peut directement obtenir le active actuellement rendu). élément. DOMNotez que j'ai utilisé active et exécuté element[0] après DOM, j'ai découvert que n'était toujours pas trouvé lors de l'utilisation directe de $timeout. Quelqu'un pourra-t-il répondre à cette question ? 10mschange_listchange_listCet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois DOMManuel d'utilisation d'AngularJS pour en savoir plus. Si vous avez des questions, vous pouvez laisser un). message ci-dessous.

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!