详解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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python实现端口检测的方法
2018/07/24 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python实现xml转json文件的示例代码
2020/12/30 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
linux面试题参考答案(5)
2014/09/01 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
员工年终自我评价
2014/09/14 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
实例详解Python的进程,线程和协程
2022/03/13 Python