欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法

 更新時(shí)間:2018年01月16日 13:55:25   作者:狼牙冷  
這篇文章主要介紹了AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法,結(jié)合實(shí)例形式分析了AngularJS基于自定義指令及廣播事件實(shí)現(xiàn)監(jiān)聽功能的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法。分享給大家供大家參考,具體如下:

監(jiān)聽ng-repeat渲染完成有兩種方法

一、最實(shí)用的方法:

<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="{{productUrl}}{{src.imageName}}">
    </li>
</ul>

對(duì)應(yīng)作用域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完成后執(zhí)行的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頁面的代碼,添加標(biāo)簽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>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解

    使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解

    這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼

    Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼

    這篇文章主要介紹了Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • 解決ionic和angular上拉加載的問題

    解決ionic和angular上拉加載的問題

    這篇文章主要介紹了解決ionic和angular上拉加載的問題,需要的朋友可以參考下
    2017-08-08
  • AngularJS 實(shí)現(xiàn)JavaScript 動(dòng)畫效果詳解

    AngularJS 實(shí)現(xiàn)JavaScript 動(dòng)畫效果詳解

    本文主要介紹AngularJS 實(shí)現(xiàn) JavaScript 動(dòng)畫的資料,這里整理了詳細(xì)的資料和簡(jiǎn)單示例代碼,有興趣的小伙伴可以參考下
    2016-09-09
  • 淺談angular表單提交中ng-submit的默認(rèn)使用方法

    淺談angular表單提交中ng-submit的默認(rèn)使用方法

    今天小編就為大家分享一篇淺談angular表單提交中ng-submit的默認(rèn)使用方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置

    如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置

    這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法

    Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法

    驗(yàn)證碼倒計(jì)時(shí)這個(gè)功能相信對(duì)大家每個(gè)人來說都不陌生,之前介紹了在Android中的實(shí)現(xiàn)方法,下面這篇文章主要給大家介紹了利用Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友們下面來一起看看吧。
    2017-06-06
  • Angular1.x復(fù)雜指令實(shí)例詳解

    Angular1.x復(fù)雜指令實(shí)例詳解

    這篇文章主要介紹了Angular1.x復(fù)雜指令,結(jié)合實(shí)例形式分析了指令的使用、模板指令、指令的作用域等概念與具體使用技巧,需要的朋友可以參考下
    2017-03-03
  • AngularJS基礎(chǔ) ng-options 指令詳解

    AngularJS基礎(chǔ) ng-options 指令詳解

    本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下
    2016-08-08
  • 詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能

    詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能

    這篇文章主要介紹了詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10

最新評(píng)論