如何监听angularjs列表数据是否渲染完毕

文章目录

有时候我们需要在ng列表元素渲染完毕后去执行一段js脚本,angularjs 刚好提供了ng-repeat 的一个属性$last,然后为大家简单介绍2种方式

###第一种通过回调函数

#####前端HTML

1
2
3
4
5
<ul class="smart-timeline-list">
<li data-ng-repeat="item in lists" on-finish-render-filters="Complete">
<a href="{{item.url}}">{{item.title}}</a>
</li>
</ul>

#####js脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module('mainApp').directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
var finishFunc=scope.$parent[attr.onFinishRenderFilters];
if(finishFunc)
{
finishFunc();
}
}
}
};
})
.controller('test',["$scope",function($scope){
$scope.Complete=function(){
$('#div_scrollbar').tinyscrollbar();
}
}]);

  • 分析:on-finish-render-filters 传入一个回调函数Complete ,渲染时每次会判断当前渲染记录是否为最后一条,若为最后一条,则执行Complete 函数。

###第二种方法是用消息传递的机制

1
2
3
4
5
<ul class="smart-timeline-list">
<li data-ng-repeat="item in lists" on-finish-render-filters>
<a href="{{item.url}}">{{item.title}}</a>
</li>
</ul>

#####js脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('mainApp').directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
$timeout(function() {
//根据controller的关系是选择$emit或者$broadcast
scope.$emit('ngRepeatFinished');
});
}
}
};
})
.controller('test',["$scope",function($scope){
$scope.$on('ngRepeatFinished'function (ngRepeatFinishedEvent) {
$('#div_scrollbar').tinyscrollbar();
});
}]);

  • 分析:渲染时同样每次会判断当前渲染记录是否为最后一条,若为最后一条,则想父类或者子类的controller传递消息,对应的controller里添加消息的接受监听方法。