AngularJs中,如何在render完成之后,执行Js脚本
AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。AngularJs这个新兴的MVC前端框架,具有以下特点: MVC, 模块化,自动化双向数据绑定,语义化标签、依赖注入等。
AngularJs和Jquery的有什么不同?
Jquery的主要目的是简化Js编写,专注于浏览器跨平台,主要用来操作DOM.
AngularJs主要关注Html数据的获取和呈现,以及应对日益复杂的Web应用需求,使得开发庞大的Web应用能够更加容易。
AngularJs呈现页面的原理
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%',
});
});
AngularJs中,如何在render完成之后,执行Js脚本的更多相关文章
- 多玩YY语音的面试题:C++中如何在main()函数之前执行操作?
多玩YY语音的面试题:C++中如何在main()函数之前执行操作? 第一反应main()函数是所有函数执行的开始.但是问题是main()函数执行之前如何执行呢? 联想到MFC里面的 C**App类的t ...
- Angular在render完成之后,执行Js脚本
AngularJs中,如何在render完成之后,执行Js脚本 app.directive('onFinishRenderFilters', function ($timeout) { return ...
- 在java代码中执行js脚本,实现计算出字符串“(1+2)*(1+3)”的结果
今天在公司项目中,发现一个计算运费的妙招.由于运费规则各种各样,因此写一个公式存到数据库.下次需要计算运费时,直接取出这个公式,把公式的未知变量给替换掉,然后计算出结果就是ok了. 一 ...
- Java8中执行js脚本
代码中除了callJSFunctionFromFile函数,其他均转载于文章JDK1.8中如何用ScriptEngine动态执行JS import jdk.nashorn.api.scripting. ...
- 自动化测试中执行JS脚本方法封装
执行JS脚本方法封装: class JavaScript(Base): def execute_javascript(self, js): """执行 JavaScrip ...
- 异步执行js脚本——防止阻塞
JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...
- A标签执行JS脚本
A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...
- js 点击超链接,执行js脚本,而不进行url跳转
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- selenium webdriver学习(三)------------执行js脚本
selenium webdriver学习(三)------------执行js脚本 博客分类: Selenium-webdriver 在用selenium 1.X的时候常常会用到getEval() ...
随机推荐
- RESTful API URI 设计: 判断资源是否存在?
相关的一篇文章:RESTful API URI 设计的一些总结. 问题场景:判断一个资源(Resources)是否存在,URI 该如何设计? 应用示例:判断 id 为 1 用户下,名称为 window ...
- 让自己也能使用Canvas
<canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...
- Linux添加用户(user)到用户组(group)
将一个用户添加到用户组中,千万不能直接用: usermod -G groupA 这样做会使你离开其他用户组,仅仅做为 这个用户组 groupA 的成员. 应该用 加上 -a 选项: usermod - ...
- canvas实现拖动页面时显示窗口视频
简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...
- jQuery的事件模型
前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...
- Oracle同义词+dblink的实际应用
Oracle同义词+dblink的实际应用 业务需求:原数据库(10.2.0.4.0),新数据库(11.2.0.3) 由于程序的需求原因,现在需要把新库上的某个用户直接映射到老库用户下: 1. 备份原 ...
- Java中读文件操作
InputStream & Reader InputStream(字节流),如下是InputStream的层次结构: AudioInputStream:音频输入流类,该方法可以: 从外部音频文 ...
- 深入浅出JS的封装与继承
JS虽然是一个面向对象的语言,但是不是典型的面向对象语言.Java/C++的面向对象是object - class的关系,而JS是object - object的关系,中间通过原型prototype连 ...
- 7.3 数据注解特性之ConcurrencyCheck特性【Code-First系列】
ConcurrencyCheck特性可以应用到领域类的属性中.当EF执行更新操作的时候,Code-First将列的值放在where条件语句中,你可以使用这个CurrencyCheck特性,使用已经存在 ...
- jsp原理
在eclipse里jsp编译后的java和class文件的位置 eclipse版本不一样,位置也不一样第一种:1.java类编译后产生的.class文件在D:\workspace\test\WEB-I ...