AngularJs中，如何在render完成之后，执行Js脚本

2024-05-15 22:22:43

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完成后执行的jsvar table = $("#leaderBoard").dataTable({bJQueryUI: true,"sScrollX": '100%',});
});

AngularJs中，如何在render完成之后，执行Js脚本相关推荐

多玩YY语音的面试题 C++中如何在main 函数之前执行操作
多玩YY语音的面试题:C++中如何在main()函数之前执行操作? 第一反应main()函数是所有函数执行的开始.但是问题是main()函数执行之前如何执行呢? 联想到MFC里面的 C**App类的t ...
atexit函数的执行顺序_多玩YY语音的面试题：C++中如何在main()函数之前执行操作？...
多玩YY语音的面试题:C++中如何在main()函数之前执行操作? 第一反应main()函数是所有函数执行的开始.但是问题是main()函数执行之前如何执行呢? 联想到MFC里面的 C**App类的t ...
Selenium——python中执行js脚本
import selenium from selenium import webdriver from selenium.webdriver.common.by import By from time ...
mongo shell连接到mongoDB及shell提示符下执行js脚本
同mysql数据库类似,mongoDB也可通过mongo客户端连接到mongod服务器来进行绝大多数日常管理.这个命令行工具就是mongo,在mysql中则是mysql.通过mongo命令可以连接到本 ...
mongodb java 执行js脚本_MongoDB编写并执行js脚本
使用mongodb项目时经常需要在数据库中插入假数据,如果每次都手动插入就会很麻烦,所以我们可以选择编写脚本来执行.mongodb是可以直接执行js脚本的,使用方法也比较简单. 编写脚本以插入数据为 ...
linux定时任务打印日志,Centos7(linux)使用crond服务定时执行js脚本并将脚本的输出内容记录日志文件的简单应用...
- ## 在Centos7.8上使用crond服务定时执行js脚本并将脚本执行的输出记录日志 1. 安装wget 2. wget https://npm.taobao.org/mirrors/node ...
服务器定时执行js脚本
前段时间买了一个腾讯云的linux(centos)服务器,打算在服务器上放一个js脚本,每天定时执行一次. 之前想过要写一个html,把js的脚本直接写进去,但是发现linux服务器并不能以打开网页的 ...
Java 执行 JS 脚本工具
Java 执行 JS 脚本工具用途:为了便于系统扩展,提供了 JS 脚本的功能,可以通过在系统中执行脚本来获得更复杂的功能. 例如:系统提供了一个接口,这个接口不必非的有实现类,而是可以通过JS来实 ...
ScriptEngine--Java动态执行JS脚本
ScriptEngine--Java动态执行JS脚本简介 Eval(String script) 描述实例代码 Put() and Get() 描述实例代码 CompiledScript 描述 ...

最新文章

热门文章