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%',
          });
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏农夫安全

运维的福利,黑客的噩梦

CYWL_Team服务器防御工具1.0 0x01开发前言 很多小黑都希望搭建自己的博客,论坛,来记录自己在安全之路上面的点点滴滴,不过总是被一些大牛来进行恶搞,...

3628
来自专栏java一日一条

如何分分钟成为Java嵌入式开发人员

在我10年的Java布道师生涯里,没有哪次Java新版本发布能让我如此兴奋。Java 8的发布不仅在语言本身加入了些不错的新特性,还在嵌入式开发上加入了很棒的功...

1611
来自专栏linux系统运维

负载均衡集群介绍,LVS介绍, LVS调度算法,LVS NAT模式搭建

1792
来自专栏IT大咖说

Mars在移动网络的探索和实践

摘要 Mars这个名字来自于电影《火星救援》,它是一个结合移动 App 所设计的基于 socket 层的解决方案,在网络调优方面有着更好的可控性。微信高级工程师...

3447
来自专栏微信终端开发团队的专栏

Android微信智能心跳方案

前言: 在13年11月中旬时,因为基础组件组人手紧张,Leo安排我和春哥去广州轮岗支援。刚到广州的时候,Ray让我和春哥对Line和WhatsApp的心跳机制进...

92010
来自专栏FreeBuf

搭建dvwa环境学习从MySql注入到GetShell

是啊,在项目上的系统每周每个月经过几十遍的过滤,平时看到提交参数的地方也就sqlmap跑一跑,对于最基础的手工注入都没有扎实的学会,于是我决定要知道如何搭建环境...

1193
来自专栏FreeBuf

CIA 新一波工具AngelFire: 针对Windows系统的永久恶意框架

本周,维基解密发布了新一款 CIA 工具 AngelFire。AngelFire 是一款框架植入工具,可以作为永久后门留存在被感染系统的分区引导扇区中,对目标系...

3234
来自专栏北京马哥教育

推荐!国外程序员整理的系统管理员资源大全(一)

备份软件 Amanda -客户端-服务器模型备份工具 Bacula - 另一个客户端-服务器模型备份工具 Backupninja -轻量级,可扩展的元数据备份系...

44510
来自专栏FreeBuf

Linux设备TCP连接曝高危漏洞:只要接入网络就可能被攻击

一般我们会认为,要确认互联网上的任意两台主机设备是否建立TCP连接通讯,其实并不容易——攻击者如果不在双方的通讯路径中,就更是如此了。另外如果攻击者并不在通讯路...

2538
来自专栏静下来

discuz论坛指定楼层回复工具

discuz论坛指定楼层回复工具 回复论坛指定帖子的指定楼层、适合活动抢固定楼专用。 为了能支持更多的论坛,所以这个版本有点复杂、根据当前论坛的链接形式来。指定...

3004

扫码关注云+社区