AngularJs에서 ng-repeat 렌더링 종료 후 콜백 함수 실행하기

AngularJS는 DOM 렌더링 완료 후에 콜백 함수를 실행하게 하는 기능이 없다. 직접 만들어줘야 한다.

1. custom directive 만들기

DOM 렌더링 시, ng-repeat의 마지막 줄에 도달했음을 알린다.

angular.module('MyApp').directive('emitLastRepeaterElement', function() {
    return function(scope) {
        if (scope.$last){
            scope.$emit('LastRepeaterElement');
        }
    };
});

2. custom directive 등록

ng-repeat이 달린 곳에 emit-last-repeater-element를 등록한다.

<div ng-controller="ctrl">
    <div ng-repeat="data in datas" emit-last-repeater-element>
        <span></span>
    </div>
</div>

3. 콜백 함수 등록

custom directive에서 emit이 들어왔을 때의 콜백 함수를 등록한다.

// ctrl
$scope.$on('LastRepeaterElement', () => {
    $timeout(() => console.log('good to go');, 0);
});

4. 마무리

아래 두 글을 참고로 만들었는데, 무슨 이유에서인지 두 글에 나온 방법을 조합해야 정상 동작이 되었다. 이제는 AngularJS를 쓰는 것도 골치아픈 일이 되었다. 아무튼 잘 돌아간다.

끝!

참고

• https://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/
• https://www.linkedin.com/pulse/20140822090331-106754325-execute-code-after-ng-repeat-renders-the-items/