AngularJs中,如何在render完成之后,执行Js脚本
来源:互联网 发布:电工模拟接线软件 编辑:程序博客网 时间:2024/06/05 09:22
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%', });});
阅读全文
0 0
- AngularJs中,如何在render完成之后,执行Js脚本
- AngularJs中,如何在render完成之后,执行Js脚本
- AngularJs中,如何在render完成之后,执行Js脚本
- AngularJs中,如何在render完成之后,执行Js脚本
- AngularJs中,如何在render完成之后,执行Js脚本
- angularJS如何在页面生成之后再执行其他的js脚本代码
- 如何在页面加载完成后执行js脚本
- 页面加载完成之后执行js函数
- 程序在执行完成之后删除自身
- 如何在脚本中执行客户端程序。
- 如何在IIS中执行Python脚本
- js脚本放在页面执行没问题 单独提出js文件之后引用就报错的原因
- JS 动态加载脚本并在下载完成后执行回调
- 页面所有元素加载完成之后执行某个js函数
- 让js代码等页面加载完成之后执行
- jquery DOM加载完成之后立即执行js事件
- 只能在执行 Render() 的过程中调用 RegisterForEventValidation;
- 只能在执行Render() 的过程中调用 RegisterForEventValidation
- JVM垃圾回收机制
- js基础-函数★★★
- jpg批量转成一个pdf
- MyBatis原理剖析
- 一些有趣的SQL题目
- AngularJs中,如何在render完成之后,执行Js脚本
- Spark源码分析之SparkSql的Analyzer,Optimizer
- 广义表与多重链表的概念
- WPS之word文档处理(持续更新)
- 物联网行业市场现状及发展分析
- PHP操作一维数组转树形层级结构
- mysql ON DUPLICATE KEY UPDATE
- Lock的使用---ReentrantLock
- Eclipse反向编译插件安装