Problèmes liés à l'écoute du rendu ng-repeat dans AngularJS

Cet article présente principalement deux méthodes permettant à AngularJS de surveiller l'achèvement du rendu ng-repeat et analyse les techniques de fonctionnement associées d'AngularJS en fonction d'instructions personnalisées et d'événements de diffusion pour implémenter la fonction de surveillance sur la base d'exemples. Les amis dans le besoin peuvent s'y référer. à cela

Les exemples de cet article décrivent deux méthodes permettant à AngularJS de surveiller l'achèvement du rendu ng-repeat. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il existe deux méthodes pour surveiller l'achèvement du rendu ng-repeat

1. La plus pratique méthode :

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

Contrôleur de portée correspondant :

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

Directive personnalisée :

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 . Utilisez les événements de diffusion

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser le composant de boîte d'invite globale dans vue ?

Comment utiliser l'application ElementRef dans Angular4

Comment utiliser le proxy de requête cli et les problèmes d'empaquetage de projet dans vue

Utilisez le modèle Webpack dans vue-cli pour résoudre les problèmes de construction de projet et de chemin d'emballage

Centre d'événements global de bus en vue (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!