angularjs有没有渲染之后触发的事件
2018-01-07
展开全部
最近用AngularJs做了一个Web的项目,AngularJs的设计真的很适合CRUD。真的建议很多内部的提高生产力的工具转而采用Web,以AngularJs为框架。
通常的Web程序,我们需要在页面加载完成的时候执行某些特定的操作,在没有AngularJs的时候一般采用的是监听onLoad event。但在使用AngularJs来渲染页面时,onLoad不能保证AngularJs已经完成了页面的渲染。最常见的情况就是用AngularJs来加载某个数据Table,我们得等这个Table加载完之后对Table上的数据进行操作,但因为这个Table是由AngularJs渲染的,所以得找到某个方法获得AngularJs渲染完毕后的事件。
AngularJs原生directive或Method没有提供这种功能,现在普遍的做法是通过写一个directive绑定到我们需要监听的元素上去获得该元素的渲染完毕事件,现在就以ng-repeat为例:
具体的方法有两种,一种是回调函数,一种的事件通知。为了简便,把两种方法写到一起了:
View
<ul> <li ng-repeat="item in items" on-finish-render="callMethod()">
dummy Text </li></ul>12345
Directive
.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished'); //事件通知
var fun = $scope.$eval(attrs.onFinishRender); if(fun && typeof(fun)=='function'){
fun(); //回调函数
}
});
}
}
}
}])12345678910111213141516
事件处理
//捕获 emited event$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
});
通常的Web程序,我们需要在页面加载完成的时候执行某些特定的操作,在没有AngularJs的时候一般采用的是监听onLoad event。但在使用AngularJs来渲染页面时,onLoad不能保证AngularJs已经完成了页面的渲染。最常见的情况就是用AngularJs来加载某个数据Table,我们得等这个Table加载完之后对Table上的数据进行操作,但因为这个Table是由AngularJs渲染的,所以得找到某个方法获得AngularJs渲染完毕后的事件。
AngularJs原生directive或Method没有提供这种功能,现在普遍的做法是通过写一个directive绑定到我们需要监听的元素上去获得该元素的渲染完毕事件,现在就以ng-repeat为例:
具体的方法有两种,一种是回调函数,一种的事件通知。为了简便,把两种方法写到一起了:
View
<ul> <li ng-repeat="item in items" on-finish-render="callMethod()">
dummy Text </li></ul>12345
Directive
.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished'); //事件通知
var fun = $scope.$eval(attrs.onFinishRender); if(fun && typeof(fun)=='function'){
fun(); //回调函数
}
});
}
}
}
}])12345678910111213141516
事件处理
//捕获 emited event$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询