AngularJS listens to two methods after ng-repeat rendering is completed, angularjsng-repeat

AngularJS listens to two methods after ng-repeat rendering is completed, angularjsng-repeat

This article describes two ways for AngularJS to listen for ng-repeat rendering. We will share this with you for your reference. The details are as follows:

There are two ways to listen for ng-repeat rendering completion

I. Most practical methods:

<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">          </li></ul>

Corresponding scope controller:

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

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

Ii. Use broadcast events

/** The code in the Controller file * Setup general page controller */MetronicApp. controller ('simplemanagecontroller', ['$ rootScope', '$ scope', 'settings', '$ http', function ($ rootScope, $ scope, settings, $ http) {$ scope. $ on ('ngrepeatfinished', function (ngRepeatFinishedEvent) {// below is the js FormEditable executed after table render is complete. 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

<! -- Add the onFinishRenderFilters tag to the Code on the HTML page (the format has changed): on-finish-render-filters --> <tr style = "display: none "class =" simpleTab "ng-repeat =" simpleProduct in simpleProducts "on-finish-render-filters> <td >{{ simpleProduct. productNo }}</td> </tr>