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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
js里面的变量范围分享
Jul 18 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 数组入门教程小结
2009/05/20 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
javascript self对象使用详解
2016/10/18 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
python遍历目录的方法小结
2016/04/28 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
个人自我鉴定总结
2014/03/25 职场文书
班级文化建设标语
2014/06/23 职场文书
绿色小区申报材料
2014/08/22 职场文书
小学师德师风整改措施
2014/10/27 职场文书
教师节主题班会教案
2015/08/17 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
Java常用函数式接口总结
2021/06/29 Java/Android
SQL Server Agent 服务无法启动
2022/04/20 SQL Server