Aufruf einer Funktion, wenn die ng-repeat beendet hat

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

Merke, dass ich nicht verwenden .ready() sondern wickelte es in ein $timeout. $timeout stellt sicher, dass es ausgeführt wird, wenn die ng-wiederholte Elemente sind WIRKLICH fertig Rendern (weil die $timeout ausführen wird am Ende der aktuellen digest-Zyklus -- und wird es auch nennen $apply intern, im Gegensatz zu setTimeout). So, nachdem die ng-repeat beendet hat, verwenden wir $emit zu emittieren, einer Veranstaltung, die zu den äußeren Bereichen (gleichgeordneten und übergeordneten Bereichen).

Und dann in Ihrem controller, können Sie fangen Sie mit $on:

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

Html, welches wie folgt aussieht:

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

InformationsquelleAutor holographic-principle

Die Antworten, die bisher gegeben wurde, wird nur das erste mal funktioniert, dass die ng-repeat gerendert wird, aber wenn Sie haben eine dynamische ng-repeat, was bedeutet, dass Sie werden das hinzufügen/löschen/filtern von Positionen, und Sie brauchen, um jedes mal benachrichtigt werden, dass die ng-repeat gerendert wird, sind diese Lösungen nicht für Sie arbeiten.

So, wenn Sie brauchen, um JEDES MAL benachrichtigt werden, dass die ng-repeat wird neu gerendert und nicht nur beim ersten mal, ich habe einen Weg gefunden, das zu tun, es ist sehr "hacky", aber es funktioniert gut, wenn Sie wissen, was Sie tun. Verwenden Sie diese $filter in Ihrem ng-repeat , bevor Sie alle anderen $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;
    };
})

Diese wird $emit eine Veranstaltung namens ngRepeatFinished jedes mal, dass die ng-repeat gerendert wird.

, Wie es zu benutzen:

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

Den ngRepeatFinish filter muss direkt angewendet werden, um eine Array oder eine Object definiert in Ihrem $scope haben, können Sie andere Filter nach.

, Wie es NICHT zu benutzen:

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

Gelten nicht für andere Filter zuerst und dann die ngRepeatFinish filter.

Wann sollte ich verwenden?

Wenn Sie sich bewerben möchten bestimmte css-Stile in den DOM, nachdem die Liste fertig gerendert wird, weil Sie brauchen, um Berücksichtigung der neuen Dimensionen des DOM-Elemente wurden neu gerendert, die von der ng-repeat. (BTW: diese Art von Operationen durchgeführt werden sollte innerhalb einer Richtlinie)

Was NICHT in der Funktion behandelt, die ngRepeatFinished Veranstaltung:

• Nicht eine $scope.$apply in diese Funktion oder setzen Sie Winkel in einer endlos-Schleife, die Winkel werden nicht in der Lage zu erkennen.

• Verwenden Sie es nicht für änderungen, die $scope Eigenschaften, da diese änderungen nicht sichtbar in der Ansicht, bis die nächste $digest loop, und da Sie können nicht führen Sie eine $scope.$apply Sie nicht von nutzen sein.

"Aber Filter sind nicht gedacht, um verwendet werden, so!!!!"

Nein, Sie sind nicht, dies ist ein hack, wenn Sie es nicht mögen, verwenden Sie es nicht. Wenn Sie wissen, einen besseren Weg, um das gleiche erreichen, bitte lassen Sie es mich wissen.

Zusammenfassung

Dies ist ein hack, und mit es in die falsche Richtung ist gefährlich, verwenden Sie es nur für die Anwendung von Stilen nach den ng-repeat fertig Rendern und Sie sollten keine Probleme haben.

InformationsquelleAutor Josep

Die anderen Lösungen funktionieren auf der ersten Seite zu laden, aber das aufrufen $timeout aus, der controller ist der einzige Weg, um sicherzustellen, dass Ihre Funktion wird aufgerufen, wenn das Modell sich ändert. Hier ist eine funktionierende fiddle verwendet, $timeout. Für dein Beispiel wäre das:

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

ngRepeat nur bewerten, eine Richtlinie, wenn Sie die Zeile Inhalt neu ist, so dass, wenn Sie entfernen Sie Elemente aus Ihrer Liste, onFinishRender wird nicht ausgelöst. Zum Beispiel, versuchen Sie, filtern Sie die Werte in diesen Geigen emittieren.

InformationsquelleAutor John Harley

Einer Lösung für dieses problem mit einer gefilterten ngRepeat hätte mit Mutation Ereignisse, aber Sie sind veraltet (ohne sofortigen Ersatz).

Dann dachte ich an einen anderen einfach:

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

Dieser Haken in den Knoten.Prototypen Methoden des parent-Elements mit einem one-tick $timeout, auf die Sie achten aufeinander folgenden änderungen.

Klappt es meistens richtig, aber ich habe einige Fälle, in denen die altDone würde zweimal aufgerufen werden.

Wieder... fügen Sie diese Richtlinie an die Eltern der ngRepeat.

InformationsquelleAutor Sjeiti

Ich bin sehr überrascht, nicht zu sehen, die einfache Lösung unter den Antworten auf diese Frage.
Was Sie tun möchten, ist fügen Sie ein ngInit Richtlinie auf Ihre wiederholten element (das element mit der ngRepeat - Richtlinie) - Prüfung für $last (eine spezielle variable gesetzt, im Rahmen von ngRepeat was bedeutet, dass das wiederholte element ist das Letzte in der Liste). Wenn $last ist wahr, wir Rendern das Letzte element und wir können die Funktion aufrufen, die wir wollen.

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

Den kompletten code für Ihre HTML-markup wäre:

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

Brauchst du nicht extra JS code in Ihrer app neben der scope-Funktion, die Sie anrufen möchten (in diesem Fall test) seit ngInit wird zur Verfügung gestellt von Angular.js. Nur stellen Sie sicher, dass Ihre test - Funktion in den Rahmen, so dass Sie zugegriffen werden kann von der Vorlage:

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

InformationsquelleAutor Alejandro García Iglesias