[events] ng-repeat가 끝나면 함수 호출

지금까지 제공된 답변은 처음 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전화 이벤트ngRepeatFinishedng-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.

언제 사용해야합니까?

목록 렌더링이 완료된 후 특정 CSS 스타일을 DOM에 적용하려는 경우 다음에 의해 다시 렌더링 된 DOM 요소의 새로운 차원을 고려해야합니다. ng-repeat . (BTW : 이러한 종류의 작업은 지시문 내에서 수행해야합니다)

ngRepeatFinished이벤트 를 처리하는 함수에서 수행하지 말아야 할 것 :

• $scope.$apply해당 함수에서을 수행하지 마십시오. 그렇지 않으면 Angular가 감지 할 수없는 무한 루프에 Angular를 배치하게됩니다.

• $scope속성 을 변경하는 데 사용하지 마십시오. 변경 사항은 다음 $digest루프 까지보기에 반영 되지 않으며 수행 할 수 없으므로 사용 $scope.$apply하지 않습니다.

“그러나 필터는 그런 식으로 사용되지 않습니다 !!”

아니, 그들은, 그것은 당신이 그것을 사용하지 않는 것을 좋아하지 않는 경우, 해킹입니다. 같은 것을 성취하는 더 좋은 방법을 알고 있다면 알려주십시오.

요약

이것은 해킹 이며 잘못된 방식으로 사용하는 것은 위험하므로 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');
            });
            }
        }
    }
});

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

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

<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>

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

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

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