监听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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
node.js超时timeout详解
Nov 26 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
《鸟岛》教学反思
2014/04/26 职场文书
单位承诺书格式
2014/05/21 职场文书
实习生矿工检讨书
2014/10/13 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
活动总结书怎么写
2015/05/11 职场文书
付款证明格式范文
2015/06/19 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
浅谈Vue的computed计算属性
2022/03/21 Vue.js