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 全选效果实现代码
Mar 23 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 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
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
新手vue构建单页面应用实例代码
2017/09/18 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
numpy自动生成数组详解
2017/12/15 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
通知格式
2015/04/27 职场文书
同意报考证明
2015/06/17 职场文书
解除处分决定书
2015/06/25 职场文书
小学教师读书笔记
2015/07/01 职场文书
食品安全主题班会
2015/08/13 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python