码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-03 11:09:16      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:http   lte   脚本   编写   ble   dom   对象   eve   out   

http://www.cnblogs.com/JustRun1983/p/3936371.htm

 

 

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%‘,
          });
});
技术分享

l

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

标签:http   lte   脚本   编写   ble   dom   对象   eve   out   

原文地址:http://www.cnblogs.com/beimingbingpo/p/7278270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!