Angularjs通過(guò)指令監(jiān)聽(tīng)ng-repeat渲染完成后執(zhí)行腳本的方法
前言
在用AngularJS期間, 經(jīng)常用到ng-repeat, 業(yè)務(wù)中有時(shí)需要在異步獲取數(shù)據(jù)并用ng-repeat遍歷渲染完頁(yè)面后執(zhí)行某個(gè)操作,angular本身并沒(méi)有提供監(jiān)聽(tīng)ng-repeat渲染完成的指令,所以需要自己動(dòng)手寫(xiě)。有經(jīng)驗(yàn)的同學(xué)都應(yīng)該知道,在ng-repeat模板實(shí)例內(nèi)部會(huì)暴露出一些特殊屬性$index/$first/$middle/$last/$odd/$even
,$index
會(huì)隨著每次遍歷(從0開(kāi)始)遞增,當(dāng)遍歷到最后一個(gè)時(shí),$last
的值為true,so,通過(guò)判斷$last
的值來(lái)監(jiān)聽(tīng)ng-repeat的執(zhí)行狀態(tài),怎么在遍歷過(guò)程中拿到$last
的值:自定義指令
小實(shí)例,我只寫(xiě)了最重要的部分
//要循環(huán)的數(shù)據(jù) $scope.data = [ { str: 'a' }, { str: 'b' }, { str: 'c' } ] //自定義指令repeatFinish app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat執(zhí)行完畢') } } } }) <div id="box"> <span ng-repeat="item in data" repeat-finish>{{item.str}}</span> </div>
打開(kāi)控制臺(tái),會(huì)打印出0,1,2,當(dāng)$index = 2點(diǎn)時(shí)候,$last
值為true,ng-repeat渲染完畢
so easy!
當(dāng)然指令最好是能夠復(fù)用,在這個(gè)指令內(nèi)寫(xiě)具體的業(yè)務(wù)邏輯不利于復(fù)用,可以通過(guò)給指令指定一個(gè)處理函數(shù)renderFinish
<div id="box"> <span ng-repeat="item in data" repeat-finish="renderFinish()">{{item.str}}</span> </div>
再通過(guò)指令的attr參數(shù)獲取這個(gè)處理函數(shù)
app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat執(zhí)行完畢') scope.$eval( attr.repeatFinish ) } } } }) //controller里對(duì)應(yīng)的處理函數(shù) $scope.renderFinish = function(){ console.log('渲染完之后的操作') }
attr獲取到的屬性只是一個(gè)字符串表達(dá)式,$scope.$eval
方法是專門執(zhí)行AngularJS表達(dá)式的,通過(guò)它處理函數(shù)得以執(zhí)行,這樣,指令用在不同的地方,可傳遞不同的處理函數(shù)。
有些業(yè)務(wù)比較復(fù)雜,可能ng-repeat渲染完成之后,需要執(zhí)行多個(gè)操作并且這多個(gè)操作有多個(gè)前端完成,需要用到angular的事件,在repeatFinish指令的link函數(shù)內(nèi)觸發(fā)一個(gè)事件,各位前端同學(xué)監(jiān)聽(tīng)該事件完成各自的操作
app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat執(zhí)行完畢') //向父控制器傳遞事件 scope.$emit('to-parent'); //向子控制器傳遞事件 scope.$broadcast('to-child'); } } } }) //父控制器中監(jiān)聽(tīng)事件 $scope.$on('to-parent',function(){ //父控制器執(zhí)行操作 }) //子控制器中監(jiān)聽(tīng)事件 $scope.$on('to-child',function(){ //子控制器執(zhí)行操作 })
如何在當(dāng)前控制器下監(jiān)聽(tīng)到該事件呢?angular沒(méi)有向當(dāng)前控制器傳遞事件的方法,可以先向父(子)控制器傳遞事件,父(子)控制器監(jiān)聽(tīng)到事件后反過(guò)來(lái)向子(父)控制器傳遞事件。
補(bǔ)充:IE8可以直接在元素上用指令ng-if="$last && renderFinish()"
,當(dāng)然IE8+也可以這樣用
總結(jié)
以上就是利用angular指令監(jiān)聽(tīng)ng-repeat渲染完成后執(zhí)行腳本的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
AngularJS內(nèi)建服務(wù)$location及其功能詳解
這篇文章主要為大家詳細(xì)介紹了AngularJS內(nèi)建服務(wù)$location及$location功能,感興趣的小伙伴們可以參考一下2016-07-07AngularJs根據(jù)訪問(wèn)的頁(yè)面動(dòng)態(tài)加載Controller的解決方案
這篇文章主要介紹了AngularJs根據(jù)訪問(wèn)的頁(yè)面動(dòng)態(tài)加載Controller的解決方案,需要的朋友可以參考下2015-02-02angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
這篇文章主要介紹了angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應(yīng)及頁(yè)面table元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02AngularJS初始化過(guò)程分析(引導(dǎo)程序)
這篇文章主要介紹了AngularJS初始化過(guò)程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過(guò)程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下2014-12-12angular 實(shí)時(shí)監(jiān)聽(tīng)input框value值的變化觸發(fā)函數(shù)方法
今天小編就為大家分享一篇angular 實(shí)時(shí)監(jiān)聽(tīng)input框value值的變化觸發(fā)函數(shù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器
我們?cè)陂_(kāi)發(fā)的時(shí)候都會(huì)用到表單,那么驗(yàn)證器就是必不可少的東西,這篇文章主要給大家介紹了關(guān)于在Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器的相關(guān)資料,需要的朋友可以參考下2022-03-03AngularJS學(xué)習(xí)第二篇 AngularJS依賴注入
這篇文章主要為大家詳細(xì)介紹了AngularJS學(xué)習(xí)第二篇,理解什么是AngularJS依賴注入,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02詳解Angular路由動(dòng)畫(huà)及高階動(dòng)畫(huà)函數(shù)
本文主要講解了Angular的路由動(dòng)畫(huà)和高階動(dòng)畫(huà)函數(shù),對(duì)此感興趣的同學(xué),可以把代碼親自實(shí)驗(yàn)一下,理解其原理。2021-05-05