首页 > 代码库 > angular学习笔记(三十)-指令(7)-compile和link(2)

angular学习笔记(三十)-指令(7)-compile和link(2)

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1)

上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序.

看一段三个指令嵌套的代码:

html:

<body>  <div ng-controller="compileCtrl">    <level-one>      <level-two>        <level-three>          hello,{{name}}        </level-three>      </level-two>    </level-one>  </div></body>

js:

/*20.8.2 指令-compile和link*/var appModule = angular.module(‘dirAppModule‘,[]);

  appModule.controller(‘compileCtrl‘,function($scope){
    $scope.name="code_bunny"
  });


appModule.directive(
‘levelOne‘,function(){ return { restrict:‘E‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelOne‘); return { pre:function(){ console.log(‘pre→‘+‘levelOne‘) }, post:function(){ console.log(‘post→‘+‘levelOne‘) } } } }});appModule.directive(‘levelTwo‘,function(){ return { restrict:‘E‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelTwo‘); return { pre:function(){ console.log(‘pre→‘+‘levelTwo‘) }, post:function(){ console.log(‘post→‘+‘levelTwo‘) } } } }});appModule.directive(‘levelThree‘,function(){ return { restrict:‘E‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelThree‘); return { pre:function(){ console.log(‘pre→‘+‘levelThree‘) }, post:function(){ console.log(‘post→‘+‘levelThree‘) } } } }});

得到结果:

因此,他们的执行顺序如下:

1.从外层到内层执行指令的compile函数

2.compile执行完毕以后,从外层到内层执行指令的pre-link函数

3.pre-link全部执行完以后,从内层到外层执行指令的post-link函数

代码测试地址:http://jsfiddle.net/9hoqvtja/1/

然后我们修改一下js代码如下:

/*20.8.2 指令-compile和link*/appModule.directive(‘levelOne‘,function(){    return {        restrict:‘E‘,        scope:true,        compile:function(tEle,tAttrs,trans){            console.log(‘compile→‘+‘levelOne‘+tEle.html());            return {                pre:function(scope,iEle,iAttrs){                    console.log(‘pre→‘+‘levelOne‘+iEle.html())                },                post:function(scope,iEle,iAttrs){                    console.log(‘post→‘+‘levelOne‘+iEle.html())                }            }        }    }});appModule.directive(‘levelTwo‘,function(){    return {        restrict:‘E‘,        scope:true,        compile:function(tEle,tAttrs,trans){            console.log(‘compile→‘+‘levelTwo‘+tEle.html());            return {                pre:function(scope,iEle,iAttrs){                    console.log(‘pre→‘+‘levelTwo‘+iEle.html())                },                post:function(scope,iEle,iAttrs){                    console.log(‘post→‘+‘levelTwo‘+iEle.html())                }            }        }    }});appModule.directive(‘levelThree‘,function(){    return {        restrict:‘E‘,        scope:true,        compile:function(tEle,tAttrs,trans){            console.log(‘compile→‘+‘levelThree‘+tEle.html());            return {                pre:function(scope,iEle,iAttrs){                    console.log(‘pre→‘+‘levelThree‘+iEle.html())                },                post:function(scope,iEle,iAttrs){                    console.log(‘post→‘+‘levelThree‘+iEle.html())                }            }        }    }});

我们给指令添加scope属性,在打印的过程中加入打印tEle和iEle的内容,结果如下:

可以看到,才compile阶段打印出的元素,是没有class属性的,但是在pre-link和post-link阶段打印出的元素,class属性为ng-scope ng-binding.

原因是:

compile阶段得到的元素是tElement,也就是templateElement,是原始的元素.

link阶段(无论是pre-link还是post-link),得到的是元素是iElement,也就是instanceElement,是经过compile编译后的元素的实例.

那么原始的元素和元素的实例有什么区别呢? 我的理解(不一定对)是:tElement就是最原始的元素,也就会说,页面里写的html是啥,它就是啥.而iElement就经过了angular的编译处理了.他具体处理了一些什么事情,我现在不知道,但是就这个例子,可以看到,它至少处理了‘给元素绑定scope作用域‘,‘对元素里的数据与模型进行双向绑定‘,当然他一定还处理了很多其他的事情...这就是为什么compile是没有scope参数的,因为它还没有编译嘛~ 

代码测试地址:http://jsfiddle.net/0kgn110u/1/

总结一下刚才讲的所有知识:

1.compile函数的执行顺序是从父元素向子元素执行.当某个指令的compile被执行时,它的父元素的compile都已经被执行了.它的tEle参数和tAttrs参数,指的的原始的元素和原始元素的属性,原始元素没有经过angular编译.

2.pre-link函数的执行顺序是从父元素向子元素执行.当某个指令的pre-link被执行时,它的父元素和它自己的compile函数,以及它的父元素的pre-link函数都已经被执行了.它的iEle参数和iAttrs参数,指的是经过ng编译的元素.

3.post-link函数的执行顺序是从子元素向父元素执行.当某个指令的post-link被执行时,它的父元素和它自己的compile函数,以及它的子元素的post-link函数都已经被执行了.它的iEle函数和iAttrs参数,指的是,经过ng编译的元素.

参考文献:[译]ng指令中的compile与link函数解析

但是上面说的这一切,当指令中有template(templateUrl)的时候,它compile和link的执行顺序就不是这样的了.下一篇继续讲解这种情况.

angular学习笔记(三十)-指令(7)-compile和link(2)