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
DDDoriginal
2024-12-01 07:07:11852parcourir

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>

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

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:
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