angularjs渲染完成後觸發事件

通常的Web程序，我們需要在頁面加載完成的時候執行某些特定的操作，在沒有AngularJs的時候一般採用的是監聽onLoad event。但在使用AngularJs來渲染頁面時，onLoad不能保證AngularJs已經完成了頁面的渲染。最常見的情況就是用AngularJs來加載某個數據Table，我們得等這個Table加載完之後對Table上的數據進行操作，但因爲這個Table是由AngularJs渲染的，所以得找到某個方法獲得AngularJs渲染完畢後的事件。

AngularJs原生directive或Method沒有提供這種功能，現在普遍的做法是通過寫一個directive綁定到我們需要監聽的元素上去獲得該元素的渲染完畢事件。

具體的方法有兩種，一種是回調函數，一種的事件通知。

webDirectives.directive('onFinishRender', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, attrs) {
            // AngularJs渲染完畢後的事件
            // 可以通過回調函數或者事件監聽觸發
            $timeout(function () {
                scope.$emit('ngRepeatFinished'); //事件通知
                var fun = scope.$eval(attrs.onFinishRender);
                if (fun && typeof(fun) == 'function') {
                    fun(); //回調函數
                }
            });
        }
    };
}]);

設置回調函數

<ul> 
	<li ng-repeat="item in items" on-finish-render="callMethod()">
</ul>

事件監聽

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
	console.log('渲染完成');
});