angularJs监听ng-repeat渲染完成

最新推荐文章于 2022-01-21 22:49:56 发布

狼牙冷

最新推荐文章于 2022-01-21 22:49:56 发布

阅读量4.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJs JS 文章标签： angularJs on-finish-render-fil ng-repeat

本文链接：https://blog.youkuaiyun.com/jimolangyaleng/article/details/53836895

JS 同时被 2 个专栏收录

36 篇文章

订阅专栏

angularJs

13 篇文章

订阅专栏

本文介绍了两种在AngularJS中监听ng-repeat渲染完成的方法：一是通过自定义指令结合on-finish-render-filters属性；二是利用广播事件触发ngRepeatFinished事件。这两种方法均可实现在列表渲染完成后执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听ng-repeat渲染完成有两种方法

一、最实用的方法:

 <ul class="pprt_content">
	        <li ng-repeat="src in imageHotList track by $index" ng-click='goGoodsDet(src.goodsId,src.merchId)' on-finish-render-filters="completeRepeat">
	            <img ng-src="{{productUrl}}{{src.imageName}}">
	        </li>
	    </ul>

对应作用域controller:

$scope.completeRepeate= function(){

alert('1')
}

自定义指令directive:

var app = angular.moduler('myApp',[]);

app.directive('onFinishRenderFilters', ['$timeout', function ($timeout) {
		return {
			restrict: 'A',
			link: function(scope,element,attr) {
				if (scope.$last === true) {
					var finishFunc=scope.$parent[attr.onFinishRenderFilters];
					if(finishFunc)
					{
						finishFunc();
					}
				}
			}
		};
		}])

二、使用广播事件

/*
* Controller文件中的代码 
* Setup general page controller 
*/
MetronicApp.controller('simpleManageController', ['$rootScope', 
'$scope', 'settings','$http', function($rootScope, $scope, settings,$http) {

    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        //下面是在table render完成后执行的js
        FormEditable.init();
        Metronic.stopPageLoading();

        $(".simpleTab").show();

    });
});
    
    
MetronicApp.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope,element,attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });

            }
        }
    };
});

HTML

 <!--HTML页面的代码，添加标签onFinishRenderFilters(格式有变)：on-finish-render-filters-->
  <tr style="display: none" class="simpleTab" ng-repeat="simpleProduct in simpleProducts"
      on-finish-render-filters>
          <td>
              {{simpleProduct.productNo}}
          </td>
 </tr>