源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

  • 时间:2022-03-10 06:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
[b]前言[/b] 在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写。有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性[code]$index/$first/$middle/$last/$odd/$even[/code],[code]$index[/code]会随着每次遍历(从0开始)递增,当遍历到最后一个时,[code]$last[/code]的值为true,so,通过判断[code]$last[/code]的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到[code]$last[/code]的值:自定义指令 [b]小实例,我只写了最重要的部分[/b]
//要循环的数据
$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执行完毕')
   }
  }
 }
})
<div id="box">
 <span ng-repeat="item in data" repeat-finish>{{item.str}}</span>
</div>
打开控制台,会打印出0,1,2,当$index = 2点时候,[code]$last[/code]值为true,ng-repeat渲染完毕 so easy! 当然指令最好是能够复用,在这个指令内写具体的业务逻辑不利于复用,可以通过给指令指定一个处理函数renderFinish
<div id="box">
 <span ng-repeat="item in data" repeat-finish="renderFinish()">{{item.str}}</span>
</div>
再通过指令的attr参数获取这个处理函数
app.directive('repeatFinish',function(){
 return {
  link: function(scope,element,attr){
   console.log(scope.$index)
   if(scope.$last == true){
    console.log('ng-repeat执行完毕')
    scope.$eval( attr.repeatFinish )
   }
  }
 }
})
//controller里对应的处理函数
$scope.renderFinish = function(){
 console.log('渲染完之后的操作')
}
attr获取到的属性只是一个字符串表达式,[code]$scope.$eval[/code]方法是专门执行AngularJS表达式的,通过它处理函数得以执行,这样,指令用在不同的地方,可传递不同的处理函数。 有些业务比较复杂,可能ng-repeat渲染完成之后,需要执行多个操作并且这多个操作有多个前端完成,需要用到angular的事件,在repeatFinish指令的link函数内触发一个事件,各位前端同学监听该事件完成各自的操作
app.directive('repeatFinish',function(){
 return {
  link: function(scope,element,attr){
   console.log(scope.$index)
   if(scope.$last == true){
    console.log('ng-repeat执行完毕')
    //向父控制器传递事件
    scope.$emit('to-parent');
    //向子控制器传递事件
    scope.$broadcast('to-child');
   }
  }
 }
})
//父控制器中监听事件
$scope.$on('to-parent',function(){
 //父控制器执行操作
})

//子控制器中监听事件
$scope.$on('to-child',function(){
 //子控制器执行操作
})
如何在当前控制器下监听到该事件呢?angular没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。 [b]补充:[/b]IE8可以直接在元素上用指令[code]ng-if="$last && renderFinish()"[/code] ,当然IE8+也可以这样用 [b]总结[/b] 以上就是利用angular指令监听ng-repeat渲染完成后执行脚本的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部