AngularJS监听ng-repeat渲染完成的两种方法


Posted in Javascript onJanuary 16, 2018

本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法。分享给大家供大家参考,具体如下:

监听ng-repeat渲染完成有两种方法

一、最实用的方法:

<ul class="pprt_content">
    <li ng-repeat="src in imageHotList track by $index" ng-click='goGoodsDet(src.goodsId,src.merchId)' on-finish-render-filters="completeRepeat">
      <img ng-src="{{productUrl}}{{src.imageName}}">
    </li>
</ul>

对应作用域controller:

$scope.completeRepeate= function(){
alert('1')
}

自定义指令directive:

var app = angular.moduler('myApp',[]);
app.directive('onFinishRenderFilters', ['$timeout', function ($timeout) {
    return {
      restrict: 'A',
      link: function(scope,element,attr) {
        if (scope.$last === true) {
          var finishFunc=scope.$parent[attr.onFinishRenderFilters];
          if(finishFunc)
          {
            finishFunc();
          }
        }
      }
    };
}])

二、使用广播事件

/*
* Controller文件中的代码
* Setup general page controller
*/
MetronicApp.controller('simpleManageController', ['$rootScope',
'$scope', 'settings','$http', function($rootScope, $scope, settings,$http) {
  $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    //下面是在table render完成后执行的js
    FormEditable.init();
    Metronic.stopPageLoading();
    $(".simpleTab").show();
  });
});
MetronicApp.directive('onFinishRenderFilters', function ($timeout) {
  return {
    restrict: 'A',
    link: function(scope,element,attr) {
      if (scope.$last === true) {
        $timeout(function() {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});

HTML

<!--HTML页面的代码,添加标签onFinishRenderFilters(格式有变):on-finish-render-filters-->
 <tr style="display: none" class="simpleTab" ng-repeat="simpleProduct in simpleProducts"
   on-finish-render-filters>
     <td>
       {{simpleProduct.productNo}}
     </td>
</tr>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery示例收集
Nov 05 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
javascript实现前端分页效果
Jun 24 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
微信小程序实现流程进度的图样式功能
Jan 16 #Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 #Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 #Javascript
详解layui中的树形关于取值传值问题
Jan 16 #Javascript
基于JavaScript实现抽奖系统
Jan 16 #Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 #Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
php中AES加密解密的例子小结
2014/02/18 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python 基础知识之字符串处理
2017/01/06 Python
python实现自主查询实时天气
2018/06/22 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
python dict如何定义
2020/09/02 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
介绍一下Ruby的特点
2013/01/20 面试题
员工培训心得体会
2013/12/30 职场文书
父母对孩子的寄语
2014/04/09 职场文书
导师推荐信范文
2014/05/09 职场文书
校庆口号
2014/06/20 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python