AngularJS 指令生命周期 complie link

　　AnguarJS指令从解析到生效一共会经历Inject、Compile、Controller加载、Pre-link、Post-link这几个主要阶段。

一、AngularJS指令执行过程

　　1、加载Angularjs，找到ng-app，确定应用的边界。.将html转换为DOM

　　2、遍历DOM，找到所有指令，并编译，执行directive上的complie方法。想在dom渲染前对它进行变形（修改DOM），并且不需要scope参数
想在所有相同directive里共享某些方法，定义在compile里，性能会比较好。编译模板，把表达式{{}}解析成一种特殊的指令：addTextInterpolateDirective。

　　3、对每一条指令运行link函数；link函数一般用来操作DOM，绑定事件监听器，监听数据变化，执行directive上的link方法，该方法主要进行scope绑定及事件绑定。对表达式用$watch的API来注册watchers函数

二、通过例子解析生命周期

angular.module('com.ngnice.app').directiveLift('directiveLift',function($log){
　　//1、Injecting
    $log.info('Injecting function directiveLife');
    return {
        restrict:'EA',
        transclude:true,
        replace:true,
        template:'<div><h2>count:{{count}}</h2><p ng-transclude></p></div>',
        scope:{
            count:'='
        },
        compile:function(elm,iAttrs){
　　　　　　　//2、
            $log.info('compile','count value from attribute:'+iAttrs.count);
            return {
                pre:function(scope,elm, iAttrs){
                    $log.info('pre-link','count value from attribute:'+iAttrs.count,'count value from scope:'+scope.count);
                },
                post:function(scope,elm, iAttrs){
                    $log.info('pre-link','count value from attribute:'+iAttrs.count,'count value from scope:'+scope.count);
                }
            };
        },
        controller:function($scope){
              $log.info('controller', 'count value from controller:' + $scope.count);
        }
    };
});
 
angular.modele('com.ngnice.app').controller('DemoController',function(){
     var vm = this,
      return vm;
});

　　执行结果：

　　1、Injecting

　　　　Injecting function directiveLife位置是所有directiveLife指令共享的作用域，可以在这里设置directive默认配置，但是，这类信息有更好的方式进行配置，建议不要这么做，可         以把这类配置信息抽取成Constant，其也是一种全局共享的服务，再注入到指令中，或者在config阶段对默认配置进行定制。其首次解析指令时候执行一次，最多执行一次，如         果不用指令，一次也不执行。

　　2、Complie

　　　　接下来执行compile函数,每次实例化指令的时候都调用一次，其有两个参数，原始的Dom元素节点，和它所包含的Attribute的信息，这里传入的DOM节点是初始的DOM节点         没有Link过，虽然在这里可以检查DOM信息和将被执行的表达式，但是不能访问$scope，也不能求出表达式的值，然而，这里是修改节点、插入子模版或兄弟节点的好时机，           稍后，它们就会被Angular自动编译，而不需要我们手动编译它。compile函数最有一句返回后边要用的link函数，包括pre-link和post-link函数。

　　3、Controller加载

　　　　在进入Link阶段之前，AngularJS会根据我们在指令中定义Scope，创建独立或非独立的作用域scope，然后，调用指令中的Controller初始化Scope,这里不涉及任何DOM节          点信息，但是我们可以用AngularJS的$injector注入$scope，这里也是唯一能复用的逻辑，不涉及DOM信息，只包含业务逻辑代码。

　　3、Link

　　　　Controller初始化指令$scope后，将进入真正的解析过程，分两个阶段：pre-link和post-link,对于指令的每个实例来说也执行一次，对于ngRepeat来说每个item执行一次。因        为在Controller加载阶段已经初始化好$scope对象，所以这里的$scope已经可用，注意的是这里的scope对象是传入的参数，和Controller不同，不是被注入的。此时，每个表达          式都有确定的值，AngularJS开始将模版渲染到DOM。如果想在这里添加模版，已经迟了，AngularJS不会帮忙自动解析，必须手动调用$compile编译、链接它，并插入到指定          DOM中。

　　（1）、pre-link

　　　　在plink阶段，pre-link时，子DOM的结构还没有稳定，不适合去添加设计子DOM的行为和监听事件，但是是初始化下级指令需要数据的合适时机。如果下级指令需要得到一          些初始化设置数据，那么应该写在pre-link函数中，我们的最佳实践是在Controller中初始化这类数据，但是如果需要DOM信息才能初始化的情况，只能写在pre-link函数中。

　　（2）、post-link

　　　　在指令的开发中，用的最多还是post-link，而不是pre-link,此时，它执行时候，内嵌的指令已经已经被链接过，可以安全的为当前节点或子节点添加某些行为或事件监听函             数，使当前的DOM具有我们期望的能力，自动聚焦或双向绑定。

三、注意点

1、link函数

　　（1）、link函数代表的是complie返回的postLink函数；

　　（2）、preLink表示在编译阶段之后，在子元素被链接之前执行；

　　（3）、postLink会在所有子元素被链接之后执行；

　　用link函数创建可以操作DOM的指令。链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义了时，编译函数会重载链接函数。当定义了编译函数来取代链接函数时，链接函数是我们能提供给返回对象的第二个方法，也就是postLink函数。本质上讲，这个事实正说明了链接函数的作用。它会在模板编译并同作用域进行链接后被调用，因此它负责设置事件监听器，监视数据变化和实时的操作DOM。

　　

　　

注意下：Controller是注入$scope,llink函数是Scope参数对象。

2、控制器和link

　　控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用.link函数可以将指令互相隔离开来，而controller则定义可复用的行为。

3、编译和链接阶段总结

　　编译阶段：

　　

　　链接阶段：

　　

四、例子（compile函数）

var i=0;
angular.module('myApp',[])  
 
    //定义第一个指令：customTags
    .directive('customTags',function(){
        return {
            restrict:'ECAM',
            template:'<div>{{ user.name }}</div>',
            replace:true,
            //定义了compile就不需定义link,当compile返回一个方法这个方法就是link
            //tElement 正在执行该指令的当前dom元素的jquery对象
            //tAttrs   正在执行该指令的当前dom元素的属性
            compile:function(tElement,tAttrs,transclude){
                //第一个指令的编译阶段...
                console.log('customTags compile 编译阶段...');  
 
                //若要改变dom元素,应在compile中做，此处在当前dom元素中添加一个<span>
                tElement.append(angular.element('<span> {{user.count}}</span>'));  
 
                return {
                    //pre:编译阶段之后执行
                    pre:function preLink(scope,iElement,iAttrs,controller){
                        console.log('customTags preLink..');
                    },
                    //post:所有子元素指令的post都执行后执行，此处设置了dom元素的点击事件
                    post:function postLink(scope,iElement,iAttrs,controller){  
 
                        iElement.on('click',function(){
                            scope.$apply(function(){
                                scope.user.name=' click after';
                                scope.user.count= ++i;
                            });
                        });  
 
                        console.log('customTags post end.');
                        console.log('');
                    }
                };  
 
                //compile也可直接返回一个方法，这就是 postLink，也就是上面的post
                /*return function (){
                    console.log('compile return this function')
                }*/
            },
            //进行scope绑定及事件绑定
            link:function(scope,iElement,iAttrs,bookListController){
                //link不会再执行了，因为这里定义的就是postLink
            }
        }
    })