angularjs 监听ng-repeat渲染完成
angularjs 页面是靠绑定数据完成渲染的。而监听渲染数据的完成的需求会经常遇到。下面给出解决方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!--将指令添加到迭代的标签内， on-finish-render-filters 注意指令的格式-->
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="(x, y) in myObj" on-finish-render-filters>
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"City" : "Berlin"
};
//$emit用来向父级Scope传送事件(命令)，$scope.$on()是监听事件，监听$emit或者$brodercast是否将事件(命令)
//传送回来，若事件已传送回来，则表示数据已经渲染完毕，就可以执行以后的其他操作了。
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
alert("1");
});
});
//定义指令：
app.directive('onFinishRenderFilters', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
scope.$emit('ngRepeatFinished');
}
}
};
}]);
</script>
</body>
</html>
升级实现：
给指令指定一个处理函数completeRepeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="(x, y) in myObj" on-finish-render-filters="completeRepeat()">
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"City" : "Berlin"
};
$scope.completeRepeat= function(){
alert("3");
};
//页面加载完成监听事件
$scope.$watch('$viewContentLoaded', function() {
alert("2");
});
});
app.directive('onFinishRenderFilters', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
scope.$eval( attr.onFinishRenderFilters );
}
}
};
}]);
</script>
</body>
</html>
scope.eval方法是专门执行AngularJS表达式的，通过它处理函数得以执行，这样，指令用在不同的地方，可传递不同的处理函数。
