Événement d'arrivée ng-repeat

Je veux appeler une fonction jQuery ciblant div avec table. Ce tableau est rempli avec ng-repeat.

Quand je l'appelle

$(document).ready()

Je n'ai aucun résultat.

Aussi

$scope.$on('$viewContentLoaded', myFunc);

n'aide pas.

Existe-t-il un moyen d'exécuter la fonction juste après l'achèvement de la population ng-repeat? J'ai lu un conseil sur l'utilisation de la coutume directive, mais je ne sais pas comment l'utiliser avec ng-repeat et mon div ...

En effet, vous devez utiliser des directives, et il n'y a aucun événement lié à la fin d'une boucle ng-Repeat (car chaque élément est construit individuellement et a son propre événement). Mais a) l'utilisation de directives peut être tout ce dont vous avez besoin et b) il existe quelques propriétés spécifiques à ng-Repeat que vous pouvez utiliser pour rendre votre événement "on ngRepeat terminé".

Plus précisément, si tout ce que vous voulez est de styliser / ajouter des événements à l'ensemble du tableau, vous pouvez le faire en utilisant une directive qui englobe tous les éléments ngRepeat. D'un autre côté, si vous souhaitez traiter spécifiquement chaque élément, vous pouvez utiliser une directive dans le ngRepeat, et elle agira sur chaque élément, après sa création.

Ensuite, il y a les $index, $first, $middleet les $lastpropriétés que vous pouvez utiliser à des événements de déclenchement. Donc pour ce HTML:

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>

Vous pouvez utiliser des directives comme ceci:

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

Voyez-le en action dans ce Plunker . J'espère que ça aide!

Si vous voulez simplement exécuter du code à la fin de la boucle, voici une variante légèrement plus simple qui ne nécessite pas de gestion supplémentaire des événements:

<div ng-controller="Ctrl">
  <div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
    thing {{thing}}
  </div>
</div>

function Ctrl($scope) {
  $scope.things = [
    'A', 'B', 'C'  
  ];
}

angular.module('myApp', [])
.directive('myPostRepeatDirective', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
      // iteration is complete, do whatever post-processing
      // is necessary
      element.parent().css('border', '1px solid black');
    }
  };
});

Voir une démo en direct.

Il n'est pas nécessaire de créer une directive, surtout pour avoir un ng-repeatévénement complet.

ng-init fait la magie pour vous.

  <div ng-repeat="thing in things" ng-init="$last && finished()">

le $lastfait que, ce finishedne se fera virer, lorsque le dernier élément a été rendu au DOM.

N'oubliez pas de créer un $scope.finishedévénement.

Codage heureux !!

EDIT: 23 oct.2016

Si vous souhaitez également appeler la finishedfonction lorsqu'il n'y a aucun élément dans le tableau, vous pouvez utiliser la solution de contournement suivante

<div style="display:none" ng-init="things.length < 1 && finished()"></div>
//or
<div ng-if="things.length > 0" ng-init="finished()"></div>

Ajoutez simplement la ligne ci-dessus en haut de la ng-repeat élément. Il vérifiera si le tableau n'a aucune valeur et appellera la fonction en conséquence.

Par exemple

<div ng-if="things.length > 0" ng-init="finished()"></div>
<div ng-repeat="thing in things" ng-init="$last && finished()">

Voici une directive répétée qui appelle une fonction spécifiée lorsqu'elle est vraie. J'ai trouvé que la fonction appelée doit utiliser $ timeout avec interval = 0 avant de faire une manipulation DOM, comme l'initialisation des info-bulles sur les éléments rendus. jsFiddle: http://jsfiddle.net/tQw6w/

Dans $ scope.layoutDone, essayez de commenter la ligne $ timeout et de décommenter le "NOT CORRECT!" pour voir la différence dans les info-bulles.

<ul>
    <li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
    <a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
    </li>
</ul>

JS:

angular.module('Repeat_Demo', [])

    .directive('repeatDone', function() {
        return function(scope, element, attrs) {
            if (scope.$last) { // all are rendered
                scope.$eval(attrs.repeatDone);
            }
        }
    })

    .filter('strip_http', function() {
        return function(str) {
            var http = "http://";
            return (str.indexOf(http) == 0) ? str.substr(http.length) : str;
        }
    })

    .filter('hostName', function() {
        return function(str) {
            var urlParser = document.createElement('a');
            urlParser.href = str;
            return urlParser.hostname;
        }
    })

    .controller('AppCtrl', function($scope, $timeout) {

        $scope.feedList = [
            'http://feeds.feedburner.com/TEDTalks_video',
            'http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/',
            'http://sfbay.craigslist.org/eng/index.rss',
            'http://www.slate.com/blogs/trending.fulltext.all.10.rss',
            'http://feeds.current.com/homepage/en_US.rss',
            'http://feeds.current.com/items/popular.rss',
            'http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml'
        ];

        $scope.layoutDone = function() {
            //$('a[data-toggle="tooltip"]').tooltip(); // NOT CORRECT!
            $timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
        }

    })

Voici une approche simple ng-initqui ne nécessite même pas de directive personnalisée. Cela a bien fonctionné pour moi dans certains scénarios, par exemple avoir besoin de faire défiler automatiquement une division d'éléments ng répétés vers un élément particulier lors du chargement de la page, de sorte que la fonction de défilement doit attendre jusqu'à ce que le ng-repeatrendu soit terminé sur le DOM avant de pouvoir se déclencher.

<div ng-controller="MyCtrl">
    <div ng-repeat="thing in things">
        thing: {{ thing }}
    </div>
    <div ng-init="fireEvent()"></div>
</div>

myModule.controller('MyCtrl', function($scope, $timeout){
    $scope.things = ['A', 'B', 'C'];

    $scope.fireEvent = function(){

        // This will only run after the ng-repeat has rendered its things to the DOM
        $timeout(function(){
            $scope.$broadcast('thingsRendered');
        }, 0);

    };
});

Notez que cela n'est utile que pour les fonctions que vous devez appeler une fois après le rendu initial de la répétition ng. Si vous devez appeler une fonction chaque fois que le contenu ng-repeat est mis à jour, vous devrez utiliser l'une des autres réponses sur ce fil avec une directive personnalisée.

En complément de la réponse de Pavel , quelque chose de plus lisible et facilement compréhensible serait:

<ul>
    <li ng-repeat="item in items" 
        ng-init="$last ? doSomething() : angular.noop()">{{item}}</li>
</ul>

Sinon, pourquoi pensez-vous angular.noop y a d'abord ...?

Avantages:

Vous n'avez pas besoin d'écrire une directive pour cela ...

Peut-être une approche un peu plus simple avec ngInitLodash etdebounce méthode sans avoir besoin de directive personnalisée:

Manette:

$scope.items = [1, 2, 3, 4];

$scope.refresh = _.debounce(function() {
    // Debounce has timeout and prevents multiple calls, so this will be called 
    // once the iteration finishes
    console.log('we are done');
}, 0);

Modèle:

<ul>
    <li ng-repeat="item in items" ng-init="refresh()">{{item}}</li>
</ul>

Mettre à jour

Il existe une solution AngularJS pure encore plus simple utilisant l'opérateur ternaire:

Modèle:

<ul>
    <li ng-repeat="item in items" ng-init="$last ? doSomething() : null">{{item}}</li>
</ul>

Sachez que ngInit utilise la phase de compilation de pré-liaison - c'est-à-dire que l'expression est invoquée avant le traitement des directives enfants. Cela signifie qu'un traitement asynchrone peut encore être requis.

Il peut également être nécessaire lorsque vous cochez la scope.$lastvariable d'envelopper votre déclencheur avec a setTimeout(someFn, 0). A setTimeout 0est une technique acceptée en javascript et il était impératif que ma directivefonctionne correctement.

Il s'agit d'une amélioration des idées exprimées dans d'autres réponses afin de montrer comment accéder aux propriétés ngRepeat ($ index, $ first, $ middle, $ last, $ even, $ odd) lors de l'utilisation de la syntaxe déclarative et de l'isolement de la portée ( Google a recommandé les meilleures pratiques) avec une directive sur les éléments. Notez la différence principale: scope.$parent.$last.

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return {
    restrict: 'E',
    scope: {
      someAttr: '='
    },
    link: function(scope, element, attrs) {
      angular.element(element).css('color','blue');
      if (scope.$parent.$last){
        window.alert("im the last!");
      }
    }
  };
});

Je l'ai fait de cette façon.

Créer la directive

function finRepeat() {
    return function(scope, element, attrs) {
        if (scope.$last){
            // Here is where already executes the jquery
            $(document).ready(function(){
                $('.materialboxed').materialbox();
                $('.tooltipped').tooltip({delay: 50});
            });
        }
    }
}

angular
    .module("app")
    .directive("finRepeat", finRepeat);

Après l'avoir ajouté sur l'étiquette où cette ng-répétition

<ul>
    <li ng-repeat="(key, value) in data" fin-repeat> {{ value }} </li>
</ul>

Et prêt avec cela sera exécuté à la fin de la répétition ng.

<div ng-repeat="i in items">
        <label>{{i.Name}}</label>            
        <div ng-if="$last" ng-init="ngRepeatFinished()"></div>            
</div>

Ma solution était d'ajouter un div pour appeler une fonction si l'élément était le dernier d'une répétition.

je voudrais ajouter une autre réponse, car les réponses précédentes supposent que le code nécessaire pour s'exécuter après la fin de ngRepeat est un code angulaire, qui dans ce cas toutes les réponses ci-dessus donnent une solution simple et excellente, certaines plus génériques que d'autres, et dans le cas où il est important de l'étape du cycle de vie de résumé, vous pouvez jeter un oeil à le blog de Ben Nadel à ce sujet, à l'exception de l'utilisation de $ parse au lieu de $ eval.

mais d'après mon expérience, comme le déclare l'OP, il exécute généralement des plugins ou des méthodes JQuery sur le DOM compilé finlandais, ce qui dans ce cas, j'ai trouvé que la solution la plus simple consiste à créer une directive avec un setTimeout, car la fonction setTimeout est poussée à la fin de la file d'attente du navigateur, c'est toujours juste après que tout soit fait en angulaire, généralement ngReapet qui continue après la fonction postLinking de ses parents

angular.module('myApp', [])
.directive('pluginNameOrWhatever', function() {
  return function(scope, element, attrs) {        
    setTimeout(function doWork(){
      //jquery code and plugins
    }, 0);        
  };
});

pour ceux qui se demandent que dans ce cas pourquoi ne pas utiliser $ timeout, c'est que cela provoque un autre cycle de digestion qui est complètement inutile

J'ai dû rendre des formules en utilisant MathJax après la fin de ng-repeat, aucune des réponses ci-dessus n'a résolu mon problème, alors j'ai fait comme ci-dessous. Ce n'est pas une bonne solution , mais ça a marché pour moi ...

<div ng-repeat="formula in controller.formulas">
    <div>{{formula.string}}</div>
    {{$last ? controller.render_formulas() : ""}}
</div>

J'ai trouvé une réponse ici bien pratiquée, mais il fallait quand même ajouter un délai

Créez la directive suivante:

angular.module('MyApp').directive('emitLastRepeaterElement', function() {
return function(scope) {
    if (scope.$last){
        scope.$emit('LastRepeaterElement');
    }
}; });

Ajoutez-le à votre répéteur en tant qu'attribut, comme ceci:

<div ng-repeat="item in items" emit-last-repeater-element></div>

Selon Radu:

$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {mycode});

Pour moi, cela fonctionne, mais je dois encore ajouter un setTimeout

$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {
setTimeout(function() { 
    mycode
}, 100); });

Si vous voulez simplement changer le nom de la classe pour qu'il soit rendu différemment, le code ci-dessous ferait l'affaire.

<div>
<div ng-show="loginsuccess" ng-repeat="i in itemList">
    <div id="{{i.status}}" class="{{i.status}}">
        <div class="listitems">{{i.item}}</div>
        <div class="listitems">{{i.qty}}</div>
        <div class="listitems">{{i.date}}</div>
        <div class="listbutton">
            <button ng-click="UpdateStatus(i.$id)" class="btn"><span>Done</span></button>
            <button ng-click="changeClass()" class="btn"><span>Remove</span></button>
        </div>
    <hr>
</div>

Ce code a fonctionné pour moi lorsque j'avais une exigence similaire pour rendre l'élément acheté dans ma liste d'achats en police Strick Trough.