ng-repeatが終了したときに関数を呼び出す

私が実装しようとしているのは、基本的には「on ng repeat finished rendering」ハンドラです。いつ完了したかは検出できますが、そこから関数をトリガーする方法がわかりません。

フィドルを確認してください：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>

回答：finishmoveからのフィドルの作業：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);
                });
            }
        }
    }
});

使用しなかった.ready()が、それをでラップしたことに注意してください$timeout。$timeoutngが繰り返された要素のレンダリングが本当に終了したときに実行されることを確認します（$timeoutは現在のダイジェストサイクルの最後に実行され、とは異なり内部的にも呼び出さ$applyれるためsetTimeout）。したがって、ng-repeatが終了した後、$emitイベントを外部スコープ（兄弟スコープと親スコープ）に送信するために使用します。

そして、あなたのコントローラーで、あなたはそれを$on次のようにキャッチできます：

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

次のようなhtmlの場合：

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

DOMが構築された後、ブラウザーがレンダリングされる前にコールバック（つまり、test（））を実行する場合は、$ evalAsyncを使用します。これはちらつきを防ぎます- 参照。

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

フィドル。

レンダリング後に本当にコールバックを呼び出したい場合は、$ timeoutを使用します。

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

私はイベントではなく$ evalを好みます。イベントの場合、イベントの名前を知り、そのイベントのコントローラーにコードを追加する必要があります。$ evalを使用すると、コントローラーとディレクティブの間の結合が少なくなります。

これまでに与えられた回答は、が初めてng-repeatレンダリングされるときにのみ機能しますが、動的の場合ng-repeat、つまりアイテムを追加/削除/フィルタリングする予定であり、そのたびに通知を受ける必要がある場合ng-repeatレンダリングされても、それらのソリューションは機能しません。

そう、 ng-repeat初回だけでなく、再レンダリングされることを毎回通知する必要がある場合、私はそれを行う方法を見つけました、それはかなり「ハッキー」ですが、あなたが何であるかを知っていればうまくいきますやっている。他のものを使用$filterするng-repeat 前に$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;
    };
})

これは$emit、がレンダリングされるngRepeatFinishedたびに呼び出されるイベントng-repeatです。

どうやって使うのですか：

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

ngRepeatFinishフィルタは、に直接適用する必要がありますArrayか、Objectあなたの中で定義されました$scope、あなたは後に他のフィルタを適用することができます。

使用しない方法：

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

最初に他のフィルターを適用してから、ngRepeatFinishフィルターを適用しないでください。

これはいつ使うべきですか？

リストによってレンダリングされたDOM要素の新しい寸法を考慮する必要があるため、リストのレンダリングが完了した後、特定のcssスタイルをDOMに適用する場合 ng-repeat。（ところで：これらの種類の操作はディレクティブ内で行う必要があります）

を処理する関数ですべきでないこと ngRepeatFinishedイベント：

• 実行しないでください $scope.$applyその関数でを、Angularが検出できない無限ループにAngularが配置されます。

• $scopeプロパティの変更には使用しないでください。これらの変更は次の$digestループまでビューに反映されず、また、$scope.$applyそれらをても意味がありません。

「しかし、フィルターはそのように使用することを意図していません!!」

いいえ、そうではありません。これはハックです。気に入らない場合は使用しないでください。同じことを達成するためのより良い方法を知っているなら、私に知らせてください。

まとめ

これはハックであり、間違った方法で使用するのは危険ng-repeatです。レンダリングが完了した後でスタイルを適用する場合にのみ使用してください。問題は発生しません。

同じコントローラーで異なるng-repeatに対して異なる関数を呼び出す必要がある場合は、次のようなことを試すことができます。

ディレクティブ：

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

コントローラーで、$ onを使用してイベントをキャッチします。

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

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

複数の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>

その他のソリューションは、初期ページの読み込み時に正常に機能しますが、モデルが変更されたときに関数が確実に呼び出されるようにするには、コントローラーから$ timeoutを呼び出すことが唯一の方法です。$ timeoutを使用する作業フィドルは次のとおりです。あなたの例では、それは：

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

ngRepeatは行のコンテンツが新しい場合のみディレクティブを評価するため、リストからアイテムを削除した場合、onFinishRenderは発生しません。たとえば、これらのバイオリンの放出にフィルター値を入力してみてください。

2ドルスコープの小道具を使用するのが嫌ではなく、コンテンツがリピートのみであるディレクティブを記述している場合は、非常に単純な解決策があります（最初のレンダリングのみに関心があると仮定した場合）。リンク機能で：

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

これは、レンダリングされたリストのメンバーの幅または高さに基づいてDOM操作を行う必要のあるディレクティブがある場合に役立ちます（これが、この質問をする理由として最も可能性が高いと思います）が、一般的ではありません。提案されている他のソリューションとして。

フィルタリングされたngRepeatに関するこの問題の解決策は、Mutationである可能性がありますイベントであったが、非推奨（即時の置き換えなし）です。

それから私は別の簡単なものを考えました：

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

これは、1ティックの$ timeoutを使用して親要素のNode.prototypeメソッドにフックし、連続的な変更を監視します。

ほぼ正しく動作しますが、altDoneが2回呼び出される場合があります。

繰り返しますが、このディレクティブをngRepeatの親に追加します。

とても簡単です、これが私がやった方法です。

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

フィドルhttp://jsfiddle.net/yNXS2/をご覧ください。あなたが作成したディレクティブは新しいスコープを作成しなかったので、私は方法を続けました。

$scope.test = function(){... それを実現しました。

この質問に対する回答の中で最も簡単な解決策を見つけられなかったことに非常に驚きました。やりたいことはngInit、繰り返し要素（ngRepeatディレクティブのある要素）にディレクティブを追加して$last（ngRepeat繰り返し要素がリストの最後であることを示すスコープ内に設定された特殊変数）をチェックすることです。$lasttrueの場合、最後の要素をレンダリングしており、必要な関数を呼び出すことができます。

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

HTMLマークアップの完全なコードは次のとおりです。

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

Angular.jsによって提供されるtestため、呼び出すスコープ関数（この場合は）以外に、アプリに追加のJSコードは必要ありませんngInit。testテンプレートからアクセスできるように、スコープに関数があることを確認してください。

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