详解angular中如何监控dom渲染完毕


Posted in Javascript onJanuary 03, 2017

刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求。

那么如果真的需要用某个jquery插件,自己懒得封装angular插件或者懒得去找angular插件的时候,我们该怎么判断dom加载完毕。

有人说使用ng-init=""

亲测:表示没达到我想要的结果....

当然你如果使用window.onload=function(){}的话,不知道行不行,你可以去试试...

我们先了解一下angular的背景:

AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。AngularJs这个新兴的MVC前端框架,具有以下特点: MVC, 模块化,自动化双向数据绑定,语义化标签、依赖注入等。

angular和jquery有什么不同呢?

Jquery的主要目的是简化Js编写,专注于浏览器跨平台,主要用来操作DOM.

AngularJs主要关注Html数据的获取和呈现,以及应对日益复杂的Web应用需求,使得开发庞大的Web应用能够更加容易。

事实上,AnguarJs提供了一些对于Html进行加强的语义标签(directive),这些标签在浏览器加载完页面后被执行。举例来说:

<table id=”leaderBoard”>
     <thead>
       <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Salary</th>
       </tr>
     </thead>
     <tbody>
       <tr ng-repeat="user in users">
         <td>{{user.Id}}</td>
         <td>{{user.Name}}</td>
         <td>{{user.Salary}}</td>
       </tr>
     </tbody>
</table>

上面的ng-repeat,就是一个directive, 相当于一个for循环。在页面加载完成后,AngularJs会遍历users数据对象,来呈现(render)出这个table中的内容。

如何实现在render完成之后,执行Js脚本

当我们使用Jquery结合AngulraJs使用的时候,希望在render完table后,执行一段js脚本,把JqTable应用到该table上。在实际开发中,会经常碰到这样的需求,希望能够捕获到AngularJs渲染完成页面的事件。

要达到这个目的,我们需要为当前的app自定义directive:

app.directive('onFinishRenderFilters', function ($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function() {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});

然后,在我们需要监控的地方,加上该directive:

<tr ng-repeat="user in users" on-finish-render-filters>
   <td>{{user.Id}}</td>
   <td>{{user.Name}}</td>
   <td>{{user.Salary}}</td>
</tr>

最后,补充上我们需要render完成之后的Js脚本:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
     //下面是在table render完成后执行的js
     var table = $("#leaderBoard").dataTable({
       bJQueryUI: true,
       "sScrollX": '100%',
     });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
DWR中各种java方法的调用
May 04 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
Node.js学习入门
Jan 03 #Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 #Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 #Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 #Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 #Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 #Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 #Javascript
You might like
php 中英文语言转换类
2011/09/07 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
Yii全局函数用法示例
2017/01/22 PHP
js遍历td tr等html元素
2012/12/13 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
JS控制输入框内字符串长度
2014/05/21 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue组件与复用详解
2018/04/08 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
python基于phantomjs实现导入图片
2016/05/13 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
南京软件公司的.net程序员笔试题
2014/08/31 面试题
九一八事变演讲稿
2014/09/05 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
小平您好观后感
2015/06/09 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
MySQL 条件查询的常用操作
2022/04/28 MySQL