详解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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 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引用效率问题分析
2012/03/23 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
phpwind放自动注册方法
2006/12/02 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
浅谈python3中input输入的使用
2019/08/02 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
职工趣味运动会方案
2014/02/10 职场文书
给校长的建议书500字
2014/05/15 职场文书
会计学专业求职信
2014/07/17 职场文书
暑期社会实践证明书
2014/11/17 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android