快捷導航

Angular ng-repeat遍歷渲染完頁面后執(zhí)行其他操作詳細介紹

更新時間：2016年12月13日 11:12:31 投稿：lqh

這篇文章主要介紹了Angular ng-repeat遍歷渲染完頁面后執(zhí)行其他操作詳細介紹的相關(guān)資料,需要的朋友可以參考下

Angular ng-repeat遍歷渲染

業(yè)務(wù)中有時需要在異步獲取數(shù)據(jù)并用ng-repeat遍歷渲染完頁面后執(zhí)行某個操作，angular本身并沒有提供監(jiān)聽ng-repeat渲染完成的指令，所以需要自己動手寫。有經(jīng)驗的同學都應(yīng)該知道，在ng-repeat模板實例內(nèi)部會暴露出一些特殊屬性$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!

當然指令最好是能夠復用，在這個指令內(nèi)寫具體的業(yè)務(wù)邏輯不利于復用，可以通過給指令指定一個處理函數(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里對應(yīng)的處理函數(shù)
$scope.renderFinish = function(){
  console.log('渲染完之后的操作')
}

attr獲取到的屬性只是一個字符串表達式，$scope.$eval方法是專門執(zhí)行AngularJS表達式的，通過它處理函數(shù)得以執(zhí)行，這樣，指令用在不同的地方，可傳遞不同的處理函數(shù)。

有些業(yè)務(wù)比較復雜，可能ng-repeat渲染完成之后，需要執(zhí)行多個操作并且這多個操作有多個前端完成，需要用到angular的事件，在repeatFinish指令的link函數(shù)內(nèi)觸發(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)聽到事件后反過來向子（父）控制器傳遞事件。

一句話總結(jié)：指令是angular的核心功能之一，用好了事半功倍，監(jiān)聽ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: