1. ホーム

[解決済み】ng-repeatが終了したときに関数を呼び出す

2022-04-01 03:20:27

質問

私が実装しようとしているのは、基本的に "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>

回答 : フィニッシングムーヴから動くバイオリン。 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 . $timeout は、ng-repeated 要素が本当にレンダリングを終了したときに実行されることを確認します (なぜなら $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>