Richiamo di una funzione al termine di ng-repeat

Quello che sto cercando di implementare è fondamentalmente un gestore "on ng repeat repeat rendering". Sono in grado di rilevare quando è fatto, ma non riesco a capire come attivare una funzione da esso.

Controlla il violino: http://jsfiddle.net/paulocoelho/BsMqq/3/

JS

var module = angular.module('testApp', [])
    .directive('onFinishRender', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                element.ready(function () {
                    console.log("calling:"+attr.onFinishRender);
                    // CALL TEST HERE!
                });
            }
        }
    }
});

function myC($scope) {
    $scope.ta = [1, 2, 3, 4, 5, 6];
    function test() {
        console.log("test executed");
    }
}

HTML

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>

Risposta : violino di lavoro da finishingmove: http://jsfiddle.net/paulocoelho/BsMqq/4/

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

Si noti che non ho usato .ready()ma piuttosto avvolto in a $timeout. $timeoutsi assicura che venga eseguito quando gli elementi ng-ripetuti hanno REALMENTE terminato il rendering (perché $timeoutverrà eseguito alla fine del ciclo di digest corrente - e chiamerà anche $applyinternamente, a differenzasetTimeout ). Quindi, una volta ng-repeatterminato, usiamo $emitper emettere un evento su ambiti esterni (ambiti fratelli e genitori).

E poi nel tuo controller, puoi prenderlo con $on:

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

Con HTML che assomiglia a questo:

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>

Utilizzare $ evalAsync se si desidera che il callback (ovvero test ()) venga eseguito dopo la creazione del DOM, ma prima del rendering del browser. Ciò eviterà lo sfarfallio - rif .

if (scope.$last) {
   scope.$evalAsync(attr.onFinishRender);
}

Violino .

Se vuoi davvero chiamare il tuo callback dopo il rendering, usa $ timeout:

if (scope.$last) {
   $timeout(function() { 
      scope.$eval(attr.onFinishRender);
   });
}

Preferisco $ eval invece di un evento. Con un evento, dobbiamo conoscere il nome dell'evento e aggiungere il codice al nostro controller per quell'evento. Con $ eval, c'è meno accoppiamento tra il controller e la direttiva.

Le risposte che sono state fornite finora funzioneranno solo la prima volta che ng-repeatvengono rese , ma se hai una dinamica ng-repeat, il che significa che stai per aggiungere / eliminare / filtrare elementi e devi essere avvisato ogni volta che il ng-repeatviene reso, quelle soluzioni non funzioneranno per te.

Quindi, se hai bisogno di essere avvisato OGNI VOLTA che il ng-repeatrendering viene ridimensionato e non solo la prima volta, ho trovato un modo per farlo, è abbastanza "confuso", ma funzionerà bene se sai cosa sei facendo. Usa questo $filternel tuo ng-repeat prima di usare qualsiasi altro$filter :

.filter('ngRepeatFinish', function($timeout){
    return function(data){
        var me = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    me.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})

Questo sarà $emitun evento chiamato ngRepeatFinishedogni volta che ng-repeatviene reso.

Come usarlo:

<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >

Il ngRepeatFinishfiltro deve essere applicato direttamente a un Arrayo un Objectdefinito nel tuo$scope , puoi applicare altri filtri dopo.

Come NON usarlo:

<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >

Non applicare prima altri filtri e quindi applicare il ngRepeatFinishfiltro.

Quando dovrei usare questo?

Se si desidera applicare determinati stili CSS nel DOM dopo che l'elenco ha terminato il rendering, poiché è necessario tenere conto delle nuove dimensioni degli elementi DOM che sono stati renderizzati nuovamente da ng-repeat. (A proposito: quel tipo di operazioni dovrebbe essere fatto all'interno di una direttiva)

Cosa NON FARE nella funzione che gestisce l' ngRepeatFinishedevento:

• Non eseguire a $scope.$applyin quella funzione o inserirai Angular in un loop infinito che Angular non sarà in grado di rilevare.

• Non utilizzarlo per apportare modifiche alle $scopeproprietà, poiché tali modifiche non si rifletteranno nella vista fino al $digestciclo successivo e poiché non è possibile eseguirle $scope.$apply, non saranno di alcuna utilità.

"Ma i filtri non sono fatti per essere usati così !!"

No, non lo sono, questo è un trucco, se non ti piace non usarlo. Se conosci un modo migliore per realizzare la stessa cosa, per favore fatemelo sapere.

Riassumendo

Questo è un trucco e usarlo nel modo sbagliato è pericoloso, usalo solo per applicare gli stili dopo che il ng-repeatrendering è terminato e non dovresti avere problemi.

Se devi chiamare funzioni diverse per diverse ripetizioni di ng sullo stesso controller, puoi provare qualcosa del genere:

La direttiva:

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
            $timeout(function () {
                scope.$emit(attr.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

Nel controller, cattura gli eventi con $ on:

$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

Nel modello con più ng-repeat

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>

Le altre soluzioni funzioneranno correttamente al caricamento della pagina iniziale, ma chiamare $ timeout dal controller è l'unico modo per garantire che la funzione venga chiamata quando il modello cambia. Ecco un violino funzionante che utilizza $ timeout. Per il tuo esempio sarebbe:

.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
    $timeout(function () {
       test();
    });
});

ngRepeat valuterà una direttiva solo quando il contenuto della riga è nuovo, quindi se rimuovi elementi dal tuo elenco, onFinishRender non verrà attivato. Ad esempio, prova a inserire i valori del filtro in questi emit di violini .

Se non sei contrario all'utilizzo di oggetti di scena a doppio dollaro e stai scrivendo una direttiva il cui unico contenuto è una ripetizione, esiste una soluzione piuttosto semplice (supponendo che ti interessi solo al rendering iniziale). Nella funzione di collegamento:

const dereg = scope.$watch('$$childTail.$last', last => {
    if (last) {
        dereg();
        // do yr stuff -- you may still need a $timeout here
    }
});

Questo è utile per i casi in cui hai una direttiva che deve eseguire la manipolazione DOM in base alla larghezza o all'altezza dei membri di un elenco renderizzato (che ritengo sia il motivo più probabile per cui potresti porre questa domanda), ma non è così generico come le altre soluzioni che sono state proposte.

Una soluzione a questo problema con un ngRepeat filtrato avrebbe potuto essere con Mutazione eventi , ma sono obsoleti (senza sostituzione immediata).

Poi ho pensato a un altro semplice:

app.directive('filtered',function($timeout) {
    return {
        restrict: 'A',link: function (scope,element,attr) {
            var elm = element[0]
                ,nodePrototype = Node.prototype
                ,timeout
                ,slice = Array.prototype.slice
            ;

            elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
            elm.removeChild = alt.bind(null,nodePrototype.removeChild);

            function alt(fn){
                fn.apply(elm,slice.call(arguments,1));
                timeout&&$timeout.cancel(timeout);
                timeout = $timeout(altDone);
            }

            function altDone(){
                timeout = null;
                console.log('Filtered! ...fire an event or something');
            }
        }
    };
});

Questo si aggancia ai metodi Node.prototype dell'elemento genitore con un timeout $ di un segno di spunta per controllare le successive modifiche.

Funziona principalmente correttamente, ma ho avuto alcuni casi in cui altDone sarebbe stato chiamato due volte.

Ancora una volta ... aggiungi questa direttiva al genitore di ngRepeat.

Molto facile, è così che l'ho fatto.

.directive('blockOnRender', function ($blockUI) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            
            if (scope.$first) {
                $blockUI.blockElement($(element).parent());
            }
            if (scope.$last) {
                $blockUI.unblockElement($(element).parent());
            }
        }
    };
})

Dai un'occhiata al violino, http://jsfiddle.net/yNXS2/ . Dal momento che la direttiva che hai creato non ha creato un nuovo ambito, ho continuato.

$scope.test = function(){... fatto accadere.

Sono molto sorpreso di non vedere la soluzione più semplice tra le risposte a questa domanda. Quello che vuoi fare è aggiungere una ngInitdirettiva sul tuo elemento ripetuto (l'elemento con la ngRepeatdirettiva) controllando $last(una variabile speciale impostata nell'ambito ngRepeatche indica che l'elemento ripetuto è l'ultimo nell'elenco). Se $lastè vero, stiamo eseguendo il rendering dell'ultimo elemento e possiamo chiamare la funzione che vogliamo.

ng-init="$last && test()"

Il codice completo per il markup HTML sarebbe:

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>

Non è necessario alcun codice JS aggiuntivo nella tua app oltre alla funzione ambito che desideri chiamare (in questo caso, test) poiché ngInitfornita da Angular.js. Assicurati solo di avere la tua testfunzione nell'ambito in modo che sia possibile accedervi dal modello:

$scope.test = function test() {
    console.log("test executed");
}