AngularJS监听ng-repeat渲染完成的两种方法_AngularJS_脚本之家
脚本之家
服务器常用软件
手机版
投稿中心
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
PHP
ASP.NET
ASP
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
网络编程
脚本专栏
脚本下载
数据库
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
YUI.Ext相关
prototype
jquery
AngularJS
json
lib_js
js面向对象
extjs
Mootools
Seajs
dojo
vue.js
backbone.js
React
其它
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS监听ng-repeat渲染完成
AngularJS监听ng-repeat渲染完成的两种方法
更新时间：2018年01月16日 13:55:25 作者：狼牙冷
这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:监听angularJs列表数据是否渲染完毕的方法示例AngularJS监听ng-repeat渲染完成的方法Angularjs渲染的 using 指令的星级评分系统示例Angular.js中下拉框实现渲染html的方法Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法JS Angular 服务器端渲染应用设置渲染超时时间​​​​​​​
AngularJS
监听
ng-repeat
相关文章
Angular2 多级注入器详解及实例这篇文章主要介绍了Angular2 多级注入器详解的相关资料,并附简单实例代码，需要的朋友可以参考下 2016-10-10
基于angular-utils-ui-breadcrumbs使用心得(分享)下面小编就为大家带来一篇基于angular-utils-ui-breadcrumbs使用心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2017-11-11
AngularJS 路由和模板实例及路由地址简化方法(必看)下面小编就为大家带来一篇AngularJS 路由和模板实例及路由地址简化方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2016-06-06
AngularJS实现的select二级联动下拉菜单功能示例这篇文章主要介绍了AngularJS实现的select二级联动下拉菜单功能,结合完整实例形式分析了AngularJS实现二级联动菜单的具体操作步骤与相关实现技巧,需要的朋友可以参考下 2017-10-10
Angular的模块化（代码分享）本文主要对Angular的模块化进行案例分析介绍，具有一定的参考价值，下面跟着小编一起来看下吧 2016-12-12
angular 未登录状态拦截路由跳转的方法今天小编就为大家分享一篇angular 未登录状态拦截路由跳转的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10
详解AngularJS中$http缓存以及处理多个$http请求的方法$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据，通过本文给大家介绍AngularJS中$http缓存以及处理多个$http请求的方法，希望的朋友一起学习吧 2016-02-02
AngularJS 教程及实例代码AngularJS 通过新的属性和表达式扩展了 HTML。AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。本文给大家介绍angularjs 的相关知识，感兴趣的朋友一起看看吧 2017-10-10
AngularJS改变元素显示状态本文主要介绍使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。下面跟着小编一起来看下吧 2017-04-04
深入理解angular2启动项目步骤本篇文章主要介绍了深入理解angular2启动步骤 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2017-07-07
最新评论
大家感兴趣的内容
1angular.foreach 循环方法使用指南2学习AngularJs:Directive指令用法（完整版）3angularJS中$apply()方法详解4angular.element方法汇总5AngularJS 日期格式化详解6angularjs指令中的compile与link函数详解7AngularJS内置指令8jQuery和AngularJS的区别浅析9AngularJS实现元素显示和隐藏的几个案例10AngularJs根据访问的页面动态加载Controller
最近更新的内容
AngularJS 面试题集锦angularjs封装bootstrap时间插件datetimepickerAngularJS 的$timeout服务示例代码AngularJS 自定义指令详解及实例代码Angularjs中controller的三种写法分享AngularJS轻松实现双击排序的功能angular中实现li或者某个元素点击变色的两种方法Angular2.js实现表单验证详解Angular.js指令学习中一些重要属性的用法教程Angular4实现图片上传预览路径不安全的问题解决
常用在线小工具
微信
投稿
脚本任务
在线工具
关注微信公众号
关于我们 -
广告合作 -
联系我们 -
免责声明 -
网站地图 -
投诉建议 -
在线投稿
CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有