监听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中的对象 推荐
Jan 09 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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代码
2012/07/17 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
Javascript----文件操作
2007/01/18 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python中下划线的使用方法
2015/03/27 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python的flask框架难学吗
2020/07/31 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
绩效工资实施方案
2014/03/15 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
大学运动会加油稿
2015/07/22 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server