Maison > interface Web > js tutoriel > Problèmes liés à l'écoute du rendu ng-repeat dans AngularJS

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

亚连
Libérer: 2018-06-11 17:00:36
original
1520 Les gens l'ont consulté

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>
Copier après la connexion

Contrôleur de portée correspondant :

$scope.completeRepeate= function(){
alert(&#39;1&#39;)
}
Copier après la connexion

Directive personnalisée :

var app = angular.moduler(&#39;myApp&#39;,[]);
app.directive(&#39;onFinishRenderFilters&#39;, [&#39;$timeout&#39;, function ($timeout) {
    return {
      restrict: &#39;A&#39;,
      link: function(scope,element,attr) {
        if (scope.$last === true) {
          var finishFunc=scope.$parent[attr.onFinishRenderFilters];
          if(finishFunc)
          {
            finishFunc();
          }
        }
      }
    };
}])
Copier après la connexion

2 . Utilisez les événements de diffusion

/*
* Controller文件中的代码
* Setup general page controller
*/
MetronicApp.controller(&#39;simpleManageController&#39;, [&#39;$rootScope&#39;,
&#39;$scope&#39;, &#39;settings&#39;,&#39;$http&#39;, function($rootScope, $scope, settings,$http) {
  $scope.$on(&#39;ngRepeatFinished&#39;, function (ngRepeatFinishedEvent) {
    //下面是在table render完成后执行的js
    FormEditable.init();
    Metronic.stopPageLoading();
    $(".simpleTab").show();
  });
});
MetronicApp.directive(&#39;onFinishRenderFilters&#39;, function ($timeout) {
  return {
    restrict: &#39;A&#39;,
    link: function(scope,element,attr) {
      if (scope.$last === true) {
        $timeout(function() {
          scope.$emit(&#39;ngRepeatFinished&#39;);
        });
      }
    }
  };
});
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal