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

監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例

 更新時(shí)間:2018年11月07日 10:17:53   作者:前端攻城小牛  
前端在做數(shù)據(jù)渲染的時(shí)候經(jīng)常會(huì)遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作,這篇文章主要介紹了監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

前端在做數(shù)據(jù)渲染的時(shí)候經(jīng)常會(huì)遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作,這幾天就一直遇到在列表和表格渲染完畢后,執(zhí)行點(diǎn)擊和選擇操作。對(duì)于angularjs處理這類問題,最好的方式就是指令 directive。

首先,定義指令:

app.directive('onfinishrenderfilters', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {  //判斷是否是最后一條數(shù)據(jù)
        $timeout(function () {
          scope.$emit('ngRepeatFinished'); //向父級(jí)scope傳送ngRepeatFinished命令
        });
      }
    }
  };
});

其次,指令定義完畢后,需要將指令添加到迭代的標(biāo)簽內(nèi),此處是<tr>標(biāo)簽

<div class="fixed-table-container" style="margin-right: 0px;">
  <table class="table table-hover lamp-table">
    <thead>
    <tr>
      <th></th>
      <th style="text-align: center; " data-field="name_device-id" tabindex="0"
        ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol>
        <div class="th-inner sortable " style="padding-right: 10px">{{i.name}}
        </div>
        <div class="fht-cell" style="width: 101px;"></div>
      </th>

    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters>
      <td><input data-index="0" name="btSelectItem" type="radio"
            value="{{$index}}" ng-click="selectInput($index)"></td>
      <td class="nameId0">{{$index+1}}</td>
      <td class="nameId1">{{i.geoZoneName}}</td>
      <td class="nameId2">{{i.description}}</td>
      <td class="nameId3">{{i.totalNumberOfMembers}}</td>
      <td class="nameId4">{{i.country}}</td>
      <td class="nameId5">{{i.lastUpdateDate}}</td>
    </tr>
    </tbody>
  </table>
</div>

最后,在最后一條數(shù)據(jù)渲染完畢后,brodercast是向子級(jí)scope傳送事件(命令)。而on()是監(jiān)聽事件,監(jiān)聽brodercast是否將事件(命令)傳送回來,若事件已傳送回來,則表示數(shù)據(jù)已經(jīng)渲染完畢,就可以執(zhí)行以后的其他操作了

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
  var btnList = $("input[name='btSelectItem']");
  btnList.eq(0).attr("checked","checked");
  $scope.provider.detalOutlet();
});

在沒有angularJs的時(shí)候一般通過監(jiān)聽onLoad事件來確定頁面是否加載完成。但在使用angularJs來渲染頁面時(shí),onLoad事件不能保證angularJs是否完成了對(duì)頁面的渲染。最常見的情況就是用angularJs來加載某個(gè)數(shù)據(jù)Table時(shí),我們得等這個(gè)Table加載完之后對(duì)Table上的數(shù)據(jù)進(jìn)行操作,但因?yàn)檫@個(gè)Table是由AngularJs渲染的,所以得找到某個(gè)方法獲得AngularJs渲染完畢后的事件。 這也就是為什么onload事件在angularJs框架上數(shù)據(jù)刷新不執(zhí)行的一個(gè)原因,因?yàn)閍ngularJs是數(shù)據(jù)驅(qū)動(dòng),根據(jù)數(shù)據(jù)的更新進(jìn)行頁面的刷新,而整體頁面已經(jīng)加載完成(數(shù)據(jù)更新,angularJs數(shù)據(jù)渲染,頁面不會(huì)重新加載),故onload事件判定頁面沒有變化,所以不予執(zhí)行!

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試

    AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試

    本文主要介紹AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試,還不錯(cuò),分享給大家,希望給大家做一個(gè)參考。
    2016-06-06
  • 詳解Angular 開發(fā)環(huán)境搭建

    詳解Angular 開發(fā)環(huán)境搭建

    Angular 是一款開源 JavaScript 框架,使開發(fā)和測(cè)試變得更加容易,這篇文章主要介紹了詳解Angular 開發(fā)環(huán)境搭建,需要的朋友可以參考下
    2017-06-06
  • 詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法

    詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法

    所謂攔截器就是在目標(biāo)達(dá)到目的地之前對(duì)其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器,每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。
    2016-12-12
  • angularJS自定義directive之帶參方法傳遞詳解

    angularJS自定義directive之帶參方法傳遞詳解

    今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • AngularJS入門教程之REST和定制服務(wù)詳解

    AngularJS入門教程之REST和定制服務(wù)詳解

    本文主要講解 AngularJS REST和定制服務(wù)的知識(shí),這里幫大家整理了相關(guān)知識(shí),并附示例代碼,詳細(xì)講解了RES和定制服務(wù)的知識(shí),有興趣的小伙伴可以參考下
    2016-08-08
  • 使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法

    使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法

    這篇文章主要介紹了使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下
    2015-06-06
  • AngularJS基礎(chǔ) ng-disabled 指令詳解及簡(jiǎn)單示例

    AngularJS基礎(chǔ) ng-disabled 指令詳解及簡(jiǎn)單示例

    本文主要介紹AngularJS ng-disabled 指令,這里幫大家整理了ng-disabled指令的基礎(chǔ)指令,并附示例代碼,有需要的小伙伴參考下
    2016-08-08
  • Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法

    Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法

    這篇文章主要給大家介紹了關(guān)于Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • 使用angular寫一個(gè)hello world

    使用angular寫一個(gè)hello world

    這篇文章主要介紹了使用angular寫一個(gè)hello world的方法及示例,需要的朋友可以參考下
    2015-01-01
  • 詳解Angularjs 如何自定義Img的ng-load 事件

    詳解Angularjs 如何自定義Img的ng-load 事件

    本篇文章主要介紹了詳解Angularjs 如何自定義Img的ng-load 事件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02

最新評(píng)論