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 条评论
登录 后参与评论

相关文章

来自专栏小文博客

百度云破限速(安卓+Windows)

9.9K3
来自专栏静下来

discuz论坛指定楼层回复工具

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

3174
来自专栏Phoenix的Android之旅

Android8.0的广播-熟悉的陌生人

Android 8.0正式版上线到现在已经有一年了,很多厂商的2018年的机型上已经用上了这个系统。

1132
来自专栏信安之路

Red Team 工具集之网络钓鱼和水坑攻击

上图是一个 Red Team 攻击的生命周期,整个生命周期包括:信息收集、攻击尝试获得权限、持久性控制、权限提升、网络信息收集、横向移动、数据分析(在这个基础上...

1540
来自专栏java一日一条

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

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

2761
来自专栏FreeBuf

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

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

3354
来自专栏FreeBuf

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

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

2938
来自专栏FreeBuf

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

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

1913
来自专栏农夫安全

运维的福利,黑客的噩梦

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

3908
来自专栏FreeBuf

伽利略远程监控系统完全安装指南

7月初,外媒用臭名昭著形容意大利的网络军火商公司hacking team及其被黑事件,黑吃黑的黑客将该公司rcs系统的安装程序、源代码和邮件打包供所有人下载,更...

37210

扫码关注云+社区

领取腾讯云代金券