Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法
前言
在用AngularJS期間, 經(jīng)常用到ng-repeat, 業(yè)務中有時需要在異步獲取數(shù)據(jù)并用ng-repeat遍歷渲染完頁面后執(zhí)行某個操作，angular本身并沒有提供監(jiān)聽ng-repeat渲染完成的指令，所以需要自己動手寫。有經(jīng)驗的同學都應該知道，在ng-repeat模板實例內部會暴露出一些特殊屬性$index/$first/$middle/$last/$odd/$even，$index會隨著每次遍歷（從0開始）遞增，當遍歷到最后一個時，$last的值為true，so，通過判斷$last的值來監(jiān)聽ng-repeat的執(zhí)行狀態(tài)，怎么在遍歷過程中拿到$last的值：自定義指令
小實例，我只寫了最重要的部分
//要循環(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>
打開控制臺，會打印出0，1，2，當$index = 2點時候，$last值為true，ng-repeat渲染完畢
so easy!
當然指令最好是能夠復用，在這個指令內寫具體的業(yè)務邏輯不利于復用，可以通過給指令指定一個處理函數(shù)renderFinish
<div id="box">
<span ng-repeat="item in data" repeat-finish＝"renderFinish()">{{item.str}}</span>
</div>
再通過指令的attr參數(shù)獲取這個處理函數(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里對應的處理函數(shù)
$scope.renderFinish = function(){
console.log('渲染完之后的操作')
}
attr獲取到的屬性只是一個字符串表達式，$scope.$eval方法是專門執(zhí)行AngularJS表達式的，通過它處理函數(shù)得以執(zhí)行，這樣，指令用在不同的地方，可傳遞不同的處理函數(shù)。
有些業(yè)務比較復雜，可能ng-repeat渲染完成之后，需要執(zhí)行多個操作并且這多個操作有多個前端完成，需要用到angular的事件，在repeatFinish指令的link函數(shù)內觸發(fā)一個事件，各位前端同學監(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í)行操作
})
如何在當前控制器下監(jiān)聽到該事件呢？angular沒有向當前控制器傳遞事件的方法，可以先向父（子）控制器傳遞事件，父（子）控制器監(jiān)聽到事件后反過來向子（父）控制器傳遞事件。
補充：IE8可以直接在元素上用指令ng-if="$last && renderFinish()" ，當然IE8+也可以這樣用
總結
以上就是利用angular指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
下面小編就為大家?guī)硪黄狫avascript基礎_標記文字的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
今天小編就為大家分享一篇關于Angular使用Restful的增刪改，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
angular基于ng-alain定義自己的select組件示例
這篇文章主要介紹了angular基于ng-alain定義自己的select組件示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Angular2搜索和重置按鈕過場動畫,需要的朋友可以參考下2017-05-05
在AngularJS應用中實現(xiàn)一些動畫效果的代碼
這篇文章主要介紹了在AngularJS應用中實現(xiàn)一些動畫效果的代碼,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產品當中。下面通過本文給大家分享使用AngularJS對表單提交內容進行驗證的操作方法，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了Angular刷新當前頁面的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
在項目中遇到這樣的需求想把下拉框的單選改為多選，怎么實現(xiàn)呢？下面小編通過本文給大家分享angularjs單選改為多選的開發(fā)過程及問題解析，需要的朋友參考下2017-02-02
本篇文章主要介紹了一些AngularJs常用的一些屬性和方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
這篇文章主要介紹了Angular實現(xiàn)的進度條功能,結合實例形式較為詳細的分析了angular進度條功能的相關界面布局、功能等操作技巧,需要的朋友可以參考下2018-02-02