angularjs 监听ng-repeat渲染完成

最新推荐文章于 2023-07-05 16:12:23 发布

坚持奋斗的李洛克

最新推荐文章于 2023-07-05 16:12:23 发布

阅读量876

点赞数

分类专栏：前端文章标签： angularjs 监听ng-repeat渲染完成

本文链接：https://blog.csdn.net/lz20120808/article/details/89067789

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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表达式的，通过它处理函数得以执行，这样，指令用在不同的地方，可传递不同的处理函数。