Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法  更新时间:2016年12月31日 10:34:36   作者:古德God   指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧。下面这篇文章主要介绍了Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法,需要的朋友可以参考下。 前言 在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写。有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$last的值:自定义指令 小实例,我只写了最重要的部分 //要循环的数据 $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执行完毕’) } } } }) {{item.str}} 打开控制台,会打印出0,1,2,当$index = 2点时候,$last值为true,ng-repeat渲染完毕 so easy! 当然指令最好是能够复用,在这个指令内写具体的业务逻辑不利于复用,可以通过给指令指定一个处理函数renderFinish {{item.str}} 再通过指令的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获取到的属性只是一个字符串表达式,$scope.$eval方法是专门执行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没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。 补充:IE8可以直接在元素上用指令ng-if=”$last && renderFinish()” ,当然IE8+也可以这样用 总结 以上就是利用angular指令监听ng-repeat渲染完成后执行脚本的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: 监听angularJs列表数据是否渲染完毕的方法示例 AngularJS监听ng-repeat渲染完成的方法 AngularJS监听ng-repeat渲染完成的两种方法 Angularjs渲染的 using 指令的星级评分系统示例 Angular.js中下拉框实现渲染html的方法 JS Angular 服务器端渲染应用设置渲染超时时间​​​​​​​ Angularjs 监听 ng-repeat 渲染 相关文章 使用AngularJS实现可伸缩的页面切换的方法 这篇文章主要介绍了使用AngularJS实现可伸缩的页面切换的方法,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下 2015-06-06 AngularJS表单验证功能分析 这篇文章主要介绍了AngularJS表单验证功能,结合具体实例形式分析了AngularJS表单验证的操作步骤、实现技巧与相关注意事项,需要的朋友可以参考下 2017-05-05 详解angular2 控制视图的封装模式 这篇文章主要介绍了详解angular2 控制视图的封装模式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 对angularjs框架下controller间的传值方法详解 今天小编就为大家分享一篇对angularjs框架下controller间的传值方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 angularJS实现动态添加,删除div方法 下面小编就为大家分享一篇angularJS实现动态添加,删除div方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 Angular自定义指令Tooltip的方法实例 现实世界千变万化,区区几种内置指令不可能满足所有的需求,下面这篇文章主要给大家介绍了关于Angular自定义指令Tooltip的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下 2022-05-05 AngularJS 使用 UI Router 实现表单向导 这篇文章主要介绍了AngularJS 使用 UI Router 实现表单向导 的相关资料,需要的朋友可以参考下 2016-01-01 详解Angular结合zTree异步加载节点数据 本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。 2018-01-01 基于datepicker定义自己的angular时间组件的示例 这篇文章主要介绍了基于datepicker定义自己的angular时间组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 对Angular.js Controller如何进行单元测试 这篇文章主要给大家介绍了如何对Angular Controller进行单页测试。如果你不太了解angular也没关系,本文也会提及关于Angular的一些知识。文中通过示例代码介绍的很详细,详细对大家的理解和学习很有帮助,下面来一起看看吧。 2016-10-10 最新评论

前言

在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写。有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$last的值:自定义指令

小实例,我只写了最重要的部分

//要循环的数据
$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点时候,$last值为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获取到的属性只是一个字符串表达式,$scope.$eval方法是专门执行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没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。

补充:IE8可以直接在元素上用指令ng-if="$last && renderFinish()" ,当然IE8+也可以这样用

总结

以上就是利用angular指令监听ng-repeat渲染完成后执行脚本的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

  • 监听angularJs列表数据是否渲染完毕的方法示例
  • AngularJS监听ng-repeat渲染完成的方法
  • AngularJS监听ng-repeat渲染完成的两种方法
  • Angularjs渲染的 using 指令的星级评分系统示例
  • Angular.js中下拉框实现渲染html的方法
  • JS Angular 服务器端渲染应用设置渲染超时时间​​​​​​​
张贴在3