监听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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
openlayers实现地图测距测面
Sep 25 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP7内核之Reference详解
2019/03/14 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
javascript调试说明
2010/06/07 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python实现的栈(Stack)
2018/01/26 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python gevent协程切换实现详解
2020/09/14 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
孝老爱亲模范事迹材料
2014/05/25 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
公司门卫岗位职责
2015/04/13 职场文书
重阳节主题班会
2015/08/17 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python