站长资源网络编程

AngularJS监听ng-repeat渲染完成的两种方法

整理:jimmy2026/7/31浏览2
简介本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法。分享给大家供大家参考,具体如下:监听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="/UploadFiles/2021-04-02/{{productUrl}}{{src.imageName}}">
    
    

    对应作用域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>
    
    

    更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

    希望本文所述对大家AngularJS程序设计有所帮助。