监听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 相关文章推荐
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
详解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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
Maps Javascript
2007/01/22 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
详解pandas映射与数据转换
2021/01/22 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
EJB的基本架构
2016/09/22 面试题
个人自荐信
2013/12/05 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
优秀民警事迹材料
2014/01/29 职场文书
公司门卫管理制度
2014/02/01 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
未中标通知书
2015/04/17 职场文书
征求意见函
2015/06/05 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android