监听angularJs列表数据是否渲染完毕的方法示例


Posted in Javascript onNovember 07, 2018

前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作。对于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>

最后,在最后一条数据渲染完毕后,brodercast是向子级scope传送事件(命令)。而on()是监听事件,监听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事件判定页面没有变化,所以不予执行!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
js键盘事件的keyCode
Jul 29 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
angularjs 缓存的使用详解
Mar 19 Javascript
vue.js中created方法作用
Mar 30 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
详解react native页面间传递数据的几种方式
Nov 07 #Javascript
微信小程序使用npm支持踩坑
Nov 07 #Javascript
Angular Material Icon使用详解
Nov 07 #Javascript
详解Webpack loader 之 file-loader
Nov 07 #Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 #Javascript
javascript动态创建对象的属性详解
Nov 07 #Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 #Javascript
You might like
php中的实现trim函数代码
2007/03/19 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python re模块的高级用法详解
2018/06/06 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
tensorflow之并行读入数据详解
2020/02/05 Python
如何使用repr调试python程序
2020/02/28 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
YII2 全局异常处理深入讲解
2021/03/24 PHP
求职自荐信范文格式
2013/11/29 职场文书
便利店促销方案
2014/02/20 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
婚礼家长致辞
2015/07/27 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis