监听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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python方法的延迟加载的示例代码
2017/12/18 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
高中教师考核方案
2014/05/18 职场文书
卖房授权委托书样本
2014/10/05 职场文书
责任书范本大全
2015/05/11 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
python playwrigh框架入门安装使用
2022/07/23 Python