Aufruf einer Funktion, wenn ng-repeat beendet ist

Was ich zu implementieren versuche, ist im Grunde ein Handler, der das Rendern beendet. Ich kann erkennen, wann es fertig ist, aber ich kann nicht herausfinden, wie ich eine Funktion daraus auslösen kann.

Überprüfen Sie die Geige: 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>

Antwort : Working Fiddle von 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);
                });
            }
        }
    }
});

Beachten Sie, dass ich es nicht verwendet .ready(), sondern in a eingewickelt habe $timeout. $timeoutstellt sicher, dass es ausgeführt wird, wenn die ng-wiederholten Elemente das Rendern WIRKLICH beendet haben (da das $timeoutam Ende des aktuellen Digest-Zyklus ausgeführt wird - und im $applyGegensatz dazu auch intern aufgerufen wirdsetTimeout ). Nachdem das ng-repeatbeendet ist, $emitsenden wir ein Ereignis an äußere Bereiche (Geschwister- und übergeordnete Bereiche).

Und dann können Sie es in Ihrem Controller abfangen mit $on:

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

Mit HTML sieht das ungefähr so ​​aus:

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

Verwenden Sie $ evalAsync, wenn Ihr Rückruf (dh test ()) ausgeführt werden soll, nachdem das DOM erstellt wurde, aber bevor der Browser gerendert wird. Dies verhindert ein Flimmern - ref .

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

Geige .

Wenn Sie Ihren Rückruf nach dem Rendern wirklich aufrufen möchten, verwenden Sie $ timeout:

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

Ich bevorzuge $ eval anstelle eines Ereignisses. Bei einem Ereignis müssen wir den Namen des Ereignisses kennen und unserem Controller Code für dieses Ereignis hinzufügen. Mit $ eval besteht weniger Kopplung zwischen dem Controller und der Direktive.

Die bisher gegebenen Antworten funktionieren nur beim ersten ng-repeatRendern . Wenn Sie jedoch eine Dynamik haben ng-repeat, bedeutet dies, dass Sie Elemente hinzufügen / löschen / filtern, und Sie müssen jedes Mal benachrichtigt werden, wenn die ng-repeatWird gerendert, funktionieren diese Lösungen nicht für Sie.

Also, wenn Sie JEDES MAL benachrichtigt werden müssen , dass die ng-repeatbekommt erneut gerendert und nicht nur das erste Mal habe ich einen Weg gefunden , das zu tun, es ist ziemlich ‚Hacky‘, aber es wird gut funktionieren , wenn Sie wissen , was Sie sind tun. Verwenden Sie dies $filterin Ihrem, ng-repeat bevor Sie andere verwenden$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;
    };
})

Dies ist $emitein Ereignis, das ngRepeatFinishedjedes Mal aufgerufen wird, wenn das ng-repeatgerendert wird.

Wie man es benutzt:

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

Der ngRepeatFinishFilter muss direkt auf einen Arrayoder einen Objectin Ihrem definierten Filter angewendet werden. Anschließend $scopekönnen Sie andere Filter anwenden.

Wie man es NICHT benutzt:

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

Wenden Sie nicht zuerst andere Filter an und wenden Sie dann den ngRepeatFinishFilter an.

Wann soll ich das benutzen?

Wenn Sie nach Abschluss des Renderns der Liste bestimmte CSS-Stile auf das DOM anwenden möchten, müssen Sie die neuen Dimensionen der DOM-Elemente berücksichtigen, die vom erneut gerendert wurden ng-repeat. (Übrigens: Diese Art von Operationen sollten innerhalb einer Richtlinie durchgeführt werden.)

Was Sie in der Funktion, die das ngRepeatFinishedEreignis behandelt, NICHT tun sollten :

• Führen Sie $scope.$applyin dieser Funktion keine aus, da sonst Angular in eine Endlosschleife versetzt wird, die Angular nicht erkennen kann.

• Verwenden Sie es nicht, um Änderungen an den $scopeEigenschaften vorzunehmen , da diese Änderungen erst in der nächsten $digestSchleife in Ihrer Ansicht wiedergegeben werden und da Sie keine Änderungen vornehmen können, sind $scope.$applysie nicht von Nutzen.

"Aber Filter sollen nicht so verwendet werden !!"

Nein, das sind sie nicht. Dies ist ein Hack. Wenn Sie ihn nicht mögen, verwenden Sie ihn nicht. Wenn Sie einen besseren Weg kennen, um dasselbe zu erreichen, lassen Sie es mich bitte wissen.

Zusammenfassen

Dies ist ein Hack , und die falsche Verwendung ist gefährlich. Verwenden Sie ihn nur zum Anwenden von Stilen, nachdem das ng-repeatRendern abgeschlossen ist und Sie keine Probleme haben sollten.

Wenn Sie verschiedene Funktionen für verschiedene ng-Wiederholungen auf demselben Controller aufrufen müssen, können Sie Folgendes versuchen:

Die Richtlinie:

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

Fangen Sie in Ihrem Controller Ereignisse mit $ on ab:

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

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

In Ihrer Vorlage mit mehreren 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>

Die anderen Lösungen funktionieren beim ersten Laden der Seite einwandfrei. Der Aufruf von $ timeout vom Controller aus ist jedoch die einzige Möglichkeit, um sicherzustellen, dass Ihre Funktion aufgerufen wird, wenn sich das Modell ändert. Hier ist eine funktionierende Geige , die $ timeout verwendet. Für Ihr Beispiel wäre es:

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

ngRepeat wertet eine Direktive nur aus, wenn der Zeileninhalt neu ist. Wenn Sie also Elemente aus Ihrer Liste entfernen, wird onFinishRender nicht ausgelöst. Versuchen Sie beispielsweise, Filterwerte in diese ausgegebenen Geigen einzugeben .

Wenn Sie nicht abgeneigt sind, Requisiten im Doppel-Dollar-Bereich zu verwenden, und eine Direktive schreiben, deren einziger Inhalt eine Wiederholung ist, gibt es eine ziemlich einfache Lösung (vorausgesetzt, Sie kümmern sich nur um das anfängliche Rendern). In der Link-Funktion:

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

Dies ist nützlich für Fälle, in denen Sie eine Direktive haben, die DOM-Manipulationen basierend auf den Breiten oder Höhen der Mitglieder einer gerenderten Liste durchführen muss (was meiner Meinung nach der wahrscheinlichste Grund ist, warum man diese Frage stellen würde), aber nicht so allgemein als die anderen vorgeschlagenen Lösungen.

Eine Lösung für dieses Problem mit einem gefilterten ngRepeat könnten Mutationsereignisse gewesen sein , die jedoch veraltet sind (ohne sofortigen Ersatz).

Dann dachte ich an eine andere einfache:

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

Dadurch werden die Node.prototype-Methoden des übergeordneten Elements mit einem Timeout von einem Tick $ verknüpft, um nach aufeinanderfolgenden Änderungen zu suchen.

Es funktioniert meistens richtig, aber ich habe einige Fälle bekommen, in denen das altDone zweimal aufgerufen wurde.

Nochmals ... fügen Sie diese Anweisung dem übergeordneten Element von ngRepeat hinzu.

Sehr einfach, so habe ich es gemacht.

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

Bitte werfen Sie einen Blick auf die Geige http://jsfiddle.net/yNXS2/ . Da die von Ihnen erstellte Direktive keinen neuen Bereich erstellt hat, habe ich den Weg fortgesetzt.

$scope.test = function(){... hat das möglich gemacht.

Ich bin sehr überrascht, nicht die einfachste Lösung unter den Antworten auf diese Frage zu sehen. Sie möchten ngInitIhrem wiederholten Element (dem Element mit der ngRepeatDirektive) eine Direktive hinzufügen, nach der gesucht wird $last(eine spezielle Variable, deren Gültigkeitsbereich ngRepeatangibt, dass das wiederholte Element das letzte in der Liste ist). Wenn dies $lastzutrifft, rendern wir das letzte Element und können die gewünschte Funktion aufrufen.

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

Der vollständige Code für Ihr HTML-Markup lautet:

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

Sie benötigen keinen zusätzlichen JS-Code in Ihrer App außer der Bereichsfunktion, die Sie aufrufen möchten (in diesem Fall test), da ngInitdiese von Angular.js bereitgestellt wird. Stellen Sie einfach sicher, dass Ihre testFunktion im Bereich enthalten ist, damit Sie über die Vorlage darauf zugreifen können:

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