监听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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
Vue实现push数组并删除的例子
Nov 01 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 管理系统程序中的后门
2009/08/05 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python中的列表知识点汇总
2015/04/14 Python
Python set常用操作函数集锦
2017/11/15 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python计算信息熵实例
2020/06/18 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
初三新学期计划书
2014/05/03 职场文书
学校节能减排方案
2014/06/13 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
统计专业自荐书
2014/07/06 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2015年暑假工作总结
2015/07/13 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
24年收藏2000多部退役军用电台
2022/02/18 无线电