angularjs自定义指令complie和link属性

一，angularjs编译的三个阶段

1.将html转换为DOM；

2.搜索匹配的directive，按照priority排序（默认优先级是0，ng-repeat为1000），并执行directive上的complie方法；

3.执行directive上的link方法，该方法主要进行scope绑定及事件绑定。

二.complie属性是一个function，, 在其中可以更改dom元素，或者进行dom元素的事件绑定等

complie：function（tElement,tAttrs,transclude）｛

return ...

｝可以返回一个对象或函数，直接返回一个函数的话就是postLink函数,这个函数其实就是单独的link函数，也可以返回一个对象，包含prelink和postlink,如果compile函数定义了参数后，将无视link函数，因为complie里面返回的就是需要执行的link函数。

参数解释：

 tElement 正在执行该指令的当前dom元素的jquery对象；  

 tAttrs   正在执行该指令的当前dom元素的属性；

 transclude 模版替换之前的内容

三. link(scope,iElement,iAttrs,controller)

1.link函数代表的是complie返回的postLink函数；

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

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

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
            }
        }
    })

    //定义第二个指令：customTags2
    .directive('customTags2',function(){
        return {
            restrict:'ECAM',
            replace:true,
            compile:function(tElement,tAttrs,transclude){
                console.log('customTags2 compile 编译阶段...');
                return {
                    pre:function preLink(){
                        console.log('customTags2 preLink..');
                    },
                    post:function postLink(){
                        console.log('customTags2 post end.');
                    }
                };
            }
        }
    })

    .controller('firstController',['$scope',function($scope){
        $scope.users=[
            {id:10,name:'张三',count:0}
        ]
    }]);

4.执行顺序：先编译，在执行preLink,最后postLink在倒着执行，即compile与pre-link的执行顺序是依次执行,但是post-link正好相反.；

5.参数解释：

scope

指令用来在其内部注册监听器的作用域。

iElement

iElement参数代表实例元素，指使用此指令的元素。在postLink函数中我们应该只操作此元素的子元素，因为子元素已经被链接过了。

iAttrs

iAttrs参数代表实例属性，是一个由定义在元素上的属性组成的标准化列表，可以在所有指令的链接函数间共享。会以JavaScript对象的形式进行传递。

controller

controller 参 数 指 向 require 选 项 定 义 的 控 制 器 。 如 果 没 有 设 置 require 选 项 ， 那 么controller参数的值为undefined。

控制器在所有的指令间共享，因此指令可以将控制器当作通信通道（公共API）。如果设置了多个require，那么这个参数会是一个由控制器实例组成的数组，而不只是一个单独的控制器。