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 相关文章推荐
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
微信小程序实现流程进度的图样式功能
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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
python实现各进制转换的总结大全
2017/06/18 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python selenium firefox使用详解
2019/02/26 Python
python绘制多个子图的实例
2019/07/07 Python
python如何导入依赖包
2020/07/13 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
优秀企业获奖感言
2014/02/01 职场文书
父母对孩子的寄语
2014/04/09 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
质检员岗位职责
2015/02/03 职场文书
2015年暑假工作总结
2015/07/13 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书