監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
前端在做數(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í)有所幫助,也希望大家多多支持腳本之家。
- 老生常談angularjs中的$state.go
- 詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
- Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
- Angular Renderer (渲染器)的具體使用
- 使用Angular CDK實(shí)現(xiàn)一個(gè)Service彈出Toast組件功能
- Angular?服務(wù)器端渲染應(yīng)用常見的內(nèi)存泄漏問題小結(jié)
- JS?Angular?服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間???????
- Angular?服務(wù)器端渲染緩存功能問題
- 使用?Angular?服務(wù)器端渲染?Transfer?State?Service
相關(guān)文章
AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試
本文主要介紹AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試,還不錯(cuò),分享給大家,希望給大家做一個(gè)參考。2016-06-06詳解為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-12angularJS自定義directive之帶參方法傳遞詳解
今天小編就為大家分享一篇angularJS自定義directive之帶參方法傳遞詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法
這篇文章主要介紹了使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06AngularJS基礎(chǔ) ng-disabled 指令詳解及簡(jiǎn)單示例
本文主要介紹AngularJS ng-disabled 指令,這里幫大家整理了ng-disabled指令的基礎(chǔ)指令,并附示例代碼,有需要的小伙伴參考下2016-08-08Angular4綁定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詳解Angularjs 如何自定義Img的ng-load 事件
本篇文章主要介紹了詳解Angularjs 如何自定義Img的ng-load 事件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02