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脚本的更多相关文章

  1. 多玩YY语音的面试题:C++中如何在main()函数之前执行操作?

    多玩YY语音的面试题:C++中如何在main()函数之前执行操作? 第一反应main()函数是所有函数执行的开始.但是问题是main()函数执行之前如何执行呢? 联想到MFC里面的 C**App类的t ...

  2. Angular在render完成之后,执行Js脚本

    AngularJs中,如何在render完成之后,执行Js脚本 app.directive('onFinishRenderFilters', function ($timeout) { return ...

  3. 在java代码中执行js脚本,实现计算出字符串“(1+2)*(1+3)”的结果

            今天在公司项目中,发现一个计算运费的妙招.由于运费规则各种各样,因此写一个公式存到数据库.下次需要计算运费时,直接取出这个公式,把公式的未知变量给替换掉,然后计算出结果就是ok了. 一 ...

  4. Java8中执行js脚本

    代码中除了callJSFunctionFromFile函数,其他均转载于文章JDK1.8中如何用ScriptEngine动态执行JS import jdk.nashorn.api.scripting. ...

  5. 自动化测试中执行JS脚本方法封装

    执行JS脚本方法封装: class JavaScript(Base): def execute_javascript(self, js): """执行 JavaScrip ...

  6. 异步执行js脚本——防止阻塞

    JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...

  7. A标签执行JS脚本

    A标签执行JS脚本 分类: Web2012-12-25 22:48 1368人阅读 评论(0) 收藏 举报 前言 A标签是html中常用的标签,它与button按钮是实现页面跳转的两种最常用的方式,经 ...

  8. js 点击超链接,执行js脚本,而不进行url跳转

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  9. selenium webdriver学习(三)------------执行js脚本

    selenium webdriver学习(三)------------执行js脚本 博客分类: Selenium-webdriver   在用selenium 1.X的时候常常会用到getEval() ...

随机推荐

  1. C# 在excel表格中检索并导出数据

    由于工作需要,我经常使用excel文档来存储和处理各种数据,在生活中偶尔也会使用excel表格来记录各种开销,相信很多朋友也和我一样.Excel的功能很强大,其中一个很实用的数据处理功能就是查找和替换 ...

  2. 响应式web布局中iframe的自适应

    困境 在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素 ...

  3. ZOJ Problem Set - 1365 Mileage Bank

    题目不难,主要说下这道题目在输入终止上的问题: 题目要求当输入为0时一次case结束,当输入为#时整个输入全部结束,可以用如下格式解决 while(scanf("%s",str)! ...

  4. ZOJ Problem Set - 1201 Inversion

    题目:这道题目的意思让人猛地一读有点反应不过来,简单解释下: 给定序列A:a1,a2,a3....,an,如果i<j且ai>aj则(ai,aj)称为序列A的一个倒置. 之后引出了序列的倒置 ...

  5. Kooboo CMS - 之后台注册用户流程方法。

    今天决定写一篇好一点的文章,吼吼!首先我们必须找到这个文件,这个文件是UsersController.cs,我们找到和添加新用户有关的方法,如下代码: public virtual ActionRes ...

  6. ASP.NET实现微信功能(1)(创建菜单,验证,给菜单添加事件)

    LZ实在 不知道怎么起名字了,索性就取了这个名字,开始吧,说实在的,想给自己的平常的学习做一个总结,总是忘了总结.也只能给工作做一个总结了. 我打算用2篇文章来写,第一篇是关于订阅号的,就是这个号,另 ...

  7. 数据库join方式分析

    前言    不管是博客园还是CSDN,看到很多朋友对数据库的理解.认识还是没有突破一个瓶颈 ,而这个瓶颈往往只是一层窗纸,越过了你将看到一个新世界.    04.05年做项目的时候,用SQL Serv ...

  8. 机器学习 1 linear regression 作业(二)

    这个线性回归的作业需要上传到https://inclass.kaggle.com/c/ml2016-pm2-5-prediction 上面,这是一个kaggle比赛的网站.第一次接触听说这个东西,恰好 ...

  9. effective java 读后感

    think in java  , effective java  这两本书一直都在java的生态圈中经久不衰.本来想着先翻过 think in java 这本大山,但是读到一半就放弃了.过长的篇幅,让 ...

  10. 微博关注/QQ信息发送

    <!doctype html> <html lang="en" xmlns:wb=“http://open.weibo.com/wb”> <head& ...