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('渲染完成');
});