监听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匿名函数的一种应用 代码封装
Jun 27 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JS实现小米轮播图
Sep 21 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
dedecms系统常用术语汇总
2007/04/03 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
详解vue-cli 接口代理配置
2017/12/13 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Sanic框架应用部署方法详解
2018/07/18 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
在Python中使用Neo4j的方法
2019/03/14 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
环保建议书作文500字
2015/09/14 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python