监听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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
详解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
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python用户管理系统
2018/03/13 Python
python微信好友数据分析详解
2018/11/19 Python
python实现名片管理系统
2018/11/29 Python
Python创建字典的八种方式
2019/02/27 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python单例模式的多种实现方法
2019/07/26 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
英语专业学子个人的自我评价
2013/10/02 职场文书
十八大闭幕感言
2014/01/22 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
总会计师岗位职责
2014/02/19 职场文书
学生会部长竞聘书
2014/03/31 职场文书
美食节目策划方案
2014/05/31 职场文书
学前教育专业求职信
2014/09/02 职场文书
经营目标责任书
2015/05/08 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书