Maison > interface Web > js tutoriel > Y a-t-il un événement déclenché lorsque ng-Repeat termine de remplir les éléments ?

Y a-t-il un événement déclenché lorsque ng-Repeat termine de remplir les éléments ?

DDD
Libérer: 2024-12-01 07:07:11
original
834 Les gens l'ont consulté

Is There an Event Triggered When ng-Repeat Finishes Populating Elements?

Événement d'achèvement de la population ng-Repeat

Problème

Manipulation des éléments renseignés par ng-repeat à l'aide des sélecteurs jQuery dans $(document).ready() ou $scope.$on('$viewContentLoaded', myFunc) s'avère futile. Existe-t-il un événement dédié qui se déclenche à la fin de ng-repeat ?

Réponse

Bien qu'il n'y ait pas d'événement spécifique signalant la fin de ng-repeat, l'utilisation de directives et de propriétés spécifiques à ng-repeat fournit une solution viable. solution.

Directives

Si votre L'objectif est de styliser ou d'attacher des gestionnaires d'événements à la table entière, vous pouvez utiliser une directive qui encapsule tous les éléments ng-repeat. À l'inverse, pour adresser des éléments spécifiques, utilisez une directive dans ng-repeat, qui s'exécutera pour chaque élément créé.

Propriétés Ng-Repeat

Le $index, $ Les propriétés first, $middle et $last permettent de déclencher des événements. Par exemple, vous pouvez utiliser la propriété $last pour afficher une alerte lorsque le dernier élément est créé.

Exemple

Considérez le code HTML suivant :

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>
Copier après la connexion

Les directives qui l'accompagnent pourraient ressembler à :

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('color','blue');
    if (scope.$last){
      window.alert("im the last!");
    }
  };
})
.directive('myMainDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('border','5px solid red');
  };
});
Copier après la connexion

Dégustez cette solution en action à travers ce Plunker.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal