Question

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

Answer 1

　　第一种通过回调函数
　　前端HTML

<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脚本

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 函数。
　　第二种方法是用消息传递的机制

<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脚本

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里添加消息的接受监听方法。