前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作。对于angularjs处理这类问题,最好的方式就是指令 directive

  首先,定义指令

app.directive('onfinishrenderfilters', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) { //判断是否是最后一条数据
$timeout(function () {
scope.$emit('ngRepeatFinished'); //向父级scope传送ngRepeatFinished命令
});
}
}
};
});

  其次,指令定义完毕后,需要将指令添加到迭代的标签内,此处是<tr>标签

<div class="fixed-table-container" style="margin-right: 0px;">
<table class="table table-hover lamp-table">
<thead>
<tr>
<th></th>
<th style="text-align: center; " data-field="name_device-id" tabindex="0"
ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol>
<div class="th-inner sortable " style="padding-right: 10px">{{i.name}}
</div>
<div class="fht-cell" style="width: 101px;"></div>
</th> </tr>
</thead>
<tbody>
<tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters>
<td><input data-index="0" name="btSelectItem" type="radio"
value="{{$index}}" ng-click="selectInput($index)"></td>
<td class="nameId0">{{$index+1}}</td>
<td class="nameId1">{{i.geoZoneName}}</td>
<td class="nameId2">{{i.description}}</td>
<td class="nameId3">{{i.totalNumberOfMembers}}</td>
<td class="nameId4">{{i.country}}</td>
<td class="nameId5">{{i.lastUpdateDate}}</td>
</tr>
</tbody>
</table>
</div>

  最后,在最后一条数据渲染完毕后,$emit用来向父级Scope传送事件(命令),$brodercast是向子级scope传送事件(命令)。而$scope.$on()是监听事件,监听$emit或者$brodercast是否将事件(命令)传送回来,若事件已传送回来,则表示数据已经渲染完毕,就可以执行以后的其他操作了。

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
var btnList = $("input[name='btSelectItem']");
btnList.eq(0).attr("checked","checked");
$scope.provider.detalOutlet();
});

  

  在没有angularJs的时候一般通过监听onLoad事件来确定页面是否加载完成。但在使用angularJs来渲染页面时,onLoad事件不能保证angularJs是否完成了对页面的渲染。最常见的情况就是用angularJs来加载某个数据Table时,我们得等这个Table加载完之后对Table上的数据进行操作,但因为这个Table是由AngularJs渲染的,所以得找到某个方法获得AngularJs渲染完毕后的事件。 这也就是为什么onload事件在angularJs框架上数据刷新不执行的一个原因,因为angularJs是数据驱动,根据数据的更新进行页面的刷新,而整体页面已经加载完成(数据更新,angularJs数据渲染,页面不会重新加载),故onload事件判定页面没有变化,所以不予执行!

angularjs -- 监听angularJs列表数据是否渲染完毕的更多相关文章

  1. AngularJS监听路由变化

    使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...

  2. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  3. Android 监听ContentProvider的数据改变

    今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...

  4. 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据

    1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...

  5. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  6. angularjs 监听 文档click 事件

    项目 上遇到  innHTML  放入 一大段的html 内容 中带有 click 事件 如onclick="callInMethod("http://www.crm.bmcc.c ...

  7. 【转载】AngularJS监听路由变化

    一.Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$l ...

  8. AngularJS监听数组变化

    我们在使用angualr的监听时候,业务的需要我们会去监听一个数组的某一个值得变化,再写逻辑代码.然而我们在使用$scope.$watch("",function(){ })时候会 ...

  9. vue music-抓取歌单列表数据(渲染轮播图)

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

随机推荐

  1. 【STM32H7教程】第14章 STM32H7的电源,复位和时钟系统

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第14章       STM32H7的电源,复位和时钟系 ...

  2. 维特比算法(Viterbi)-实例讲解(暴力破解+代码实现)

    1.简介 维特比算法是一个通用的求序列最短路径的动态规划算法,也可以用于很多其他问题,比如:文本挖掘.分词原理.既然是动态规划算法,那么就需要找到合适的局部状态,以及局部状态的递推公式.在HMM中,维 ...

  3. postman—集成到jenkins

    前言 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 将postman导出的脚本,持续集成到 ...

  4. Chapter 5. Conversions and Promotions

    JLS解读:https://docs.oracle.com/javase/specs/jls/se7/html/jls-5.html 基本数据类型的转换 1) boolean不可以转换为其他的数据类型 ...

  5. database lock

    USE masterEXEC sp_lock select * from sys.sysprocesses where blocked<>0 DBCC INPUTBUFFER(120) k ...

  6. MySQL Optimization 优化原理

    MySQL Optimization 优化原理 MySQL逻辑架构 如果能在头脑中构建一幅MySQL各组件之间如何协同工作的架构图,有助于深入理解MySQL服务器.下图展示了MySQL的逻辑架构图. ...

  7. elasticsearch(六) 之 elasticsearch优化

    目录 elasticsearch 优化 从硬件上 : 从软件上: 从用户使用层 elasticsearch 优化 从硬件上 : 使用SSD 硬盘,解决io导致的瓶颈. 增大内存 但不超过32G(单实例 ...

  8. springboot-12-自定义拦截器的配置interceptor

    springmvc中拦截器的概念已经被弱化了, springboot中使用的也不甚广泛, 通常在用户登录等方面仍有用处 创建拦截器步骤: , 创建拦截器类继承HandlerInterceptor , ...

  9. JVM笔记6-垃圾回收器

    JVM进行垃圾回收时要考虑哪的问题如下: 1.如何判定对象为垃圾对象? 1.引用计数法:在对象中添加一个引用计数器,当有地方引用这个对象的时候,引用计数器的值就+1,引用失效的时候,计数器的值就-1, ...

  10. 使用Xshell和Xftp部署简单的项目

    最近本人偶尔接触到该如何部署项目,朋友要求截图,趁此之际,简单总结一下,以供大家分享,更希望各位大神指点,大家相互学习,有问题的勿喷. 1.使用环境:win 7 + tomcat 7 + MyEcli ...