监听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 相关文章推荐
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
node.js基础知识小结
Feb 26 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript 接口原理与用法实例详解
May 12 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
javascript自执行函数
2017/02/10 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python 中如何获取列表的索引
2019/07/02 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
pytorch简介
2020/11/11 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
C#实现启动一个进程
2016/10/01 面试题
网页美工求职信范文
2014/04/17 职场文书
村容村貌整治方案
2014/05/21 职场文书
工作失误检讨书范文
2015/01/26 职场文书
中班下学期个人总结
2015/02/12 职场文书
新生开学寄语大全
2015/05/28 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Java完整实现记事本代码
2022/06/16 Java/Android