Angular ng-repeat遍歷渲染
業(yè)務(wù)中有時(shí)需要在異步獲取數(shù)據(jù)并用ng-repeat遍歷渲染完頁面后執(zhí)行某個(gè)操作，angular本身并沒有提供監(jiān)聽ng-repeat渲染完成的指令，所以需要自己動(dòng)手寫。有經(jīng)驗(yàn)的同學(xué)都應(yīng)該知道，在ng-repeat模板實(shí)例內(nèi)部會(huì)暴露出一些特殊屬性$index/$first/$middle/$last/$odd/$even，$index會(huì)隨著每次遍歷（從0開始）遞增，當(dāng)遍歷到最后一個(gè)時(shí)，$last的值為true，so，通過判斷$last的值來監(jiān)聽ng-repeat的執(zhí)行狀態(tài)，怎么在遍歷過程中拿到$last的值：自定義指令
小實(shí)例，我只寫了最重要的部分
//要循環(huán)的數(shù)據(jù)$scope.data = [ { str: 'a' }, { str: 'b' }, { str: 'c' }]//自定義指令repeatFinishapp.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>打開控制臺(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)寫具體的業(yè)務(wù)邏輯不利于復(fù)用，可以通過給指令指定一個(gè)處理函數(shù)renderFinish
<div id="box"> <span ng-repeat="item in data" repeat-finish＝"renderFinish()">{{item.str}}</span></div>再通過指令的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á)式的，通過它處理函數(shù)得以執(zhí)行，這樣，指令用在不同的地方，可傳遞不同的處理函數(shù)。
有些業(yè)務(wù)比較復(fù)雜，可能ng-repeat渲染完成之后，需要執(zhí)行多個(gè)操作并且這多個(gè)操作有多個(gè)前端完成，需要用到angular的事件，在repeatFinish指令的link函數(shù)內(nèi)觸發(fā)一個(gè)事件，各位前端同學(xué)監(jiān)聽該事件完成各自的操作
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)聽事件$scope.$on('to-parent',function(){ //父控制器執(zhí)行操作})//子控制器中監(jiān)聽事件$scope.$on('to-child',function(){ //子控制器執(zhí)行操作})如何在當(dāng)前控制器下監(jiān)聽到該事件呢？angular沒有向當(dāng)前控制器傳遞事件的方法，可以先向父（子）控制器傳遞事件，父（子）控制器監(jiān)聽到事件后反過來向子（父）控制器傳遞事件。
一句話總結(jié)：指令是angular的核心功能之一，用好了事半功倍，監(jiān)聽ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
