Issues related to listening to ng-repeat rendering in AngularJS

This article mainly introduces two methods for AngularJS to monitor the completion of ng-repeat rendering, and analyzes the related operating techniques of AngularJS based on custom instructions and broadcast events to implement the monitoring function based on examples. Friends in need can refer to the following

The examples in this article describe two methods for AngularJS to monitor the completion of ng-repeat rendering. Share it with everyone for your reference, the details are as follows:

There are two methods to monitor the completion of ng-repeat rendering

1. The most practical method:

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

Corresponding scope controller:

$scope.completeRepeate= function(){
alert('1')
}

Custom instruction 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();
          }
        }
      }
    };
}])

2. Use broadcast events

/*
* 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the global prompt box component in vue?

How to use ElementRef application in Angular4

How to use cli request proxy and project packaging issues in vue

Use webpack template in vue-cli to solve project construction and packaging path problems

Bus global event center in vue (detailed tutorial)

The above is the detailed content of Issues related to listening to ng-repeat rendering in AngularJS. For more information, please follow other related articles on the PHP Chinese website!