1. 程式人生 > >angularJs監聽ng-repeat渲染完成

angularJs監聽ng-repeat渲染完成

監聽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>