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

相关文章

来自专栏程序员互动联盟

【专业知识】java学习中的13个核心技术

1. JDBC(Java Database Connectivity): JDBC API为访问不同的数据库提供了一种统一的途径象ODBC一样,JDBC对开发...

35713
来自专栏全华班

SpringBoot 全家桶

--------------------------------------------------

1194
来自专栏程序猿

Burp Suite第十八节: 使用Burp Suite测试Web Services服务

从这一节开始,我们进入了Burp的综合使用。通过一系列的使用场景的简单学习,逐渐熟悉Burp在渗透测试中,如何结合其他的工具,组合使用,提高工作...

3656
来自专栏架构师之旅

《干货系列》如何修炼成为一名高级程序猿?

每个人都有大梦想,作为程序员当然是想做一个程序大牛,毕竟不想当将军的厨子不是好裁缝!那么要想成为好裁缝,不好程序员,应该需要哪些知识呢?小编搜罗了一下,还真不少...

1959
来自专栏大内老A

[WCF 4.0新特性] 路由服务[实例篇]

在本篇文章中,我们将通过一个具体的实例来演示如何通过路由服务。在这个例子中,我们会创建连个简单的服务HelloServie和GoodbyeService。假设客...

1655
来自专栏aoho求索

微服务网关netflix-zuul

引言:前面一个系列文章介绍了认证鉴权与API权限控制在微服务架构中的设计与实现 ,好多同学询问有没有完整的demo项目,笔者回答肯定有的。由于之前系列文章侧重讲...

4799
来自专栏Java架构解析

一个程序员如何能成为一名资深阿里P7架构师?

如JVM/分布式/高并发/性能优化/Spring MVC/Spring Boot/Spring Cloud/MyBatis/Netty源码分析等等等

130
来自专栏韩伟的专栏

分布式系统监控:通过JMX看对象模型的优势

在Java的圈子里面,任何一个技术产品,一般会先公开一系列的接口定义,然后推出对这个接口的一系列实现软件,这种做法,是一个对软件开发非常有益的进步。因为这让使用...

3955
来自专栏SDNLAB

ONOS架构之子系统介绍

前言: 为了方便灵活性,ONOS采取的是一种模块化结构,一方面能灵活地组织各种模块,容易让开发者扩展出新的模块,同时通过隔离令系统的模块各司其职而不会互相干扰。...

2736
来自专栏IT大咖说

送给前端的你:可视化快速生成模拟数据服务——Easy Mock

? 内容来源:2017年11月18日,大搜车前端工程师高攀在“2017中国开源年会”进行《Easy Mock 接口数据模拟服务》演讲分享。IT 大咖说(微信i...

3716

扫码关注云+社区