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)，这些标签在浏览器加载完页面后被执行。举例来说:


     
                                                               Id                           Name                           Salary                      
                
                                                               {
   {user.Id}}                           {
   {user.Name}}                           {
   {user.Salary}}

Id	Name	Salary
{ {user.Id}}	{ {user.Name}}	{ {user.Salary}}

上面的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:

      {
   {user.Id}}      {
   {user.Name}}      {
   {user.Salary}}

最后，补充上我们需要render完成之后的Js脚本:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {          //下面是在table render完成后执行的js          var table = $("#leaderBoard").dataTable({              bJQueryUI: true,              "sScrollX": '100%',          });});

本文转自JustRun博客园博客，原文链接：http://www.cnblogs.com/JustRun1983/p/3936371.html，如需转载请自行联系原作者