Evento finale ng-repeat

Voglio chiamare alcune funzioni jQuery destinate al div con tabella. Quella tabella è popolata conng-repeat .

Quando lo chiamo

$(document).ready()

Non ho risultato

Anche

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

non aiuta.

Esiste un modo per eseguire la funzione subito dopo il completamento della popolazione ng-repeat? Ho letto un consiglio sull'uso di custom directive, ma non ho idea di come usarlo con ng-repeat e il mio div ...

In effetti, dovresti usare le direttive e non c'è nessun evento legato alla fine di un ciclo ng-Repeat (poiché ogni elemento è costruito individualmente e ha il suo evento). Ma a) usare le direttive potrebbe essere tutto ciò di cui hai bisogno eb) ci sono alcune proprietà specifiche di ng-Repeat che puoi usare per rendere l'evento "on ngRepeat finito".

In particolare, se tutto ciò che vuoi è stile / aggiungere eventi all'intera tabella, puoi farlo usando una direttiva che comprende tutti gli elementi ngRepeat. D'altra parte, se si desidera indirizzare in modo specifico ciascun elemento, è possibile utilizzare una direttiva all'interno di ngRepeat, che agirà su ciascun elemento, dopo che è stato creato.

Poi, ci sono il $index, $first, $middlee $lastle proprietà che si possono utilizzare per eventi di trigger. Quindi per questo HTML:

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

Puoi usare le direttive in questo modo:

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

Guardalo in azione in questo Plunker . Spero che sia d'aiuto!

Se vuoi semplicemente eseguire un po 'di codice alla fine del ciclo, ecco una variazione leggermente più semplice che non richiede una gestione extra degli eventi:

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

Guarda una demo dal vivo.

Non è necessario creare una direttiva, soprattutto solo per avere un ng-repeatevento completo.

ng-init fa la magia per te.

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

si $lastassicura che finishedvenga attivato solo quando l'ultimo elemento è stato renderizzato sul DOM.

Non dimenticare di creare un $scope.finishedevento.

Buona programmazione !!

EDIT: 23 ott 2016

Nel caso in cui si desideri chiamare anche la finishedfunzione quando non vi sono elementi nell'array, è possibile utilizzare la seguente soluzione alternativa

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

Aggiungi semplicemente la riga sopra nella parte superiore ng-repeatdell'elemento. Verificherà se l'array non ha alcun valore e chiamerà la funzione di conseguenza.

Per esempio

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

Ecco una direttiva ripetuta che chiama una funzione specificata quando è vera. Ho scoperto che la funzione chiamata deve utilizzare $ timeout con intervallo = 0 prima di eseguire la manipolazione DOM, come l'inizializzazione di descrizioni comandi sugli elementi renderizzati. jsFiddle: http://jsfiddle.net/tQw6w/

In $ scope.layoutDone, prova a commentare la riga $ timeout e a rimuovere il commento da "NON CORRETTO!" linea per vedere la differenza nelle descrizioni comandi.

<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...
        }

    })

Ecco un approccio semplice ng-initche non richiede nemmeno una direttiva personalizzata. Ha funzionato bene per me in alcuni scenari, ad esempio la necessità di scorrere automaticamente un div di elementi ripetuti in modo continuo su un particolare elemento al caricamento della pagina, quindi la funzione di scorrimento deve attendere fino al ng-repeattermine del rendering sul DOM prima che possa essere attivato.

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

    };
});

Si noti che ciò è utile solo per le funzioni che è necessario chiamare una volta dopo il rendering iniziale di ng-repeat. Se devi chiamare una funzione ogni volta che il contenuto di ng-repeat viene aggiornato, dovrai usare una delle altre risposte su questo thread con una direttiva personalizzata.

A complemento della risposta di Pavel , qualcosa di più leggibile e facilmente comprensibile sarebbe:

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

Perché altro pensi che angular.noopci sia in primo luogo ...?

vantaggi:

Non devi scrivere una direttiva per questo ...

Forse un approccio un po 'più semplice con ngInite Lodashdebounce metodo senza la necessità di direttiva personalizzata:

controller:

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

Modello:

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

Aggiornare

Esiste anche una soluzione AngularJS pura più semplice che utilizza l'operatore ternario:

Modello:

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

Tenere presente che ngInit utilizza la fase di compilazione pre-link, ovvero l'espressione viene invocata prima dell'elaborazione delle direttive figlio. Ciò significa che potrebbe essere ancora necessaria un'elaborazione asincrona.

Potrebbe anche essere necessario quando controlli la scope.$lastvariabile per avvolgere il trigger con a setTimeout(someFn, 0). A setTimeout 0è una tecnica accettata in javascript ed è stato indispensabile per il mio directivecorretto funzionamento.

Questo è un miglioramento delle idee espresse in altre risposte per mostrare come ottenere l'accesso alle proprietà ngRepeat ($ index, $ first, $ middle, $ last, $ even, $ odd) quando si utilizza la sintassi dichiarativa e l'ambito di isolamento ( Google ha raccomandato le migliori pratiche) con una direttiva elementare. Si noti la differenza 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!");
      }
    }
  };
});

L'ho fatto in questo modo.

Crea la direttiva

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

Dopo averlo aggiunto sull'etichetta in cui questo ng-repeat

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

E pronto con quello verrà eseguito alla fine della ng-repeat.

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

La mia soluzione era quella di aggiungere un div per chiamare una funzione se l'elemento era l'ultimo di una ripetizione.

vorrei aggiungere un'altra risposta, poiché le risposte precedenti indicano che il codice necessario per eseguire dopo che ngRepeat è stato eseguito è un codice angolare, che in tal caso tutte le risposte sopra forniscono una soluzione eccezionale e semplice, alcune più generiche di altre, e nel caso sia importante la fase del ciclo di vita del digest, puoi dare un'occhiata al blog di Ben Nadel a riguardo, ad eccezione dell'uso di $ parse invece di $ eval.

ma nella mia esperienza, come afferma l'OP, di solito esegue alcuni plug-in o metodi JQuery sul DOM compilato in modo definitivo, che in quel caso ho scoperto che la soluzione più semplice è creare una direttiva con un setTimeout, poiché la funzione setTimeout viene spinta alla fine della coda del browser, è sempre subito dopo aver fatto tutto in angolare, di solito ngReapet che continua dopo la funzione postLinking dei genitori

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

per chiunque si chieda che in quel caso perché non usare $ timeout, è che provoca un altro ciclo digest completamente inutile

Ho dovuto rendere le formule usando MathJax dopo che ng-repeat termina, nessuna delle risposte sopra ha risolto il mio problema, quindi ho fatto come di seguito. Non è una bella soluzione , ma ha funzionato per me ...

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

Ho trovato una risposta qui ben praticata, ma era ancora necessario aggiungere un ritardo

Creare la seguente direttiva:

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

Aggiungilo al tuo ripetitore come attributo, in questo modo:

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

Secondo Radu ,:

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

Per me funziona, ma devo ancora aggiungere un setTimeout

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

Se vuoi semplicemente cambiare il nome della classe in modo che venga visualizzato in modo diverso, il codice sottostante farebbe il trucco.

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

Questo codice ha funzionato per me quando avevo un requisito simile per il rendering dell'articolo acquistato nella mia lista della spesa nel carattere trogolo Strick.