Question

angular之link和compile的区别

Answer 1

compile函数的作用是对指令的模板进行转换。
link的作用是在模型和视图之间建立关联，包括在元素上注册事件监听。
scope在链接阶段才会被绑定到元素上，因此compile阶段操作scope会报错。
对于同一个指令的多个实例，compile只会执行一次；而link对于指令的每个实例都会执行一次。
一般只用link就够了。
如果自己编写的自定义的compile函数，自定义的link函数无效，因为compile函数应该返回一个link函数供后处理。

Answer 2

NG中是怎么样处理指令的

开始分析之前,先让我们看看ng中是怎么样处理指令的.

当浏览器渲染一个页面时,本质上是读html标识,然后建立dom节点,当dom树创建完毕之后广播一个事件给我们.

当你在页面中使用script标签加载ng应用程序代码时,ng监听上面的dom完成事件,查找带有ng-app属性的元素.

当找到这样的元素之后,ng开始处理dom以这个元素的起点,所以假如ng-app被添加到html元素上,则ng就会从html元素开始处理dom.

从这个起点开始,ng开始递归查找所有子元素里面,符合应用程序里定义好的指令规则.

ng怎样处理指令其实是依赖于它定义时的对象属性的,你可以定义一个compile或者一个link函数,或者用pre-link和post-link函数来代替link.

所以这些函数的区别呢?为什么要使用它?以及什么时候使用它呢?

带着这些问题跟着我一步一步来解答这些迷团吧

一段代码

为了解释这些函数的区别,下面我将使用一个简单易懂的例子

1.如果您有任何的问题,请不要犹豫赶紧在下面加上你的评论吧.

看看下面一段html标签代码

复制代码
代码如下:

<level-one>
<level-two>
<level-three>
Hello
</level-three>
</level-two>
</level-one>

然后是一段js代码

复制代码
代码如下:

var app = angular.module('plunker', []);

function createDirective(name){
return function(){
return {
restrict: 'E',
compile: function(tElem,
tAttrs){
console.log(name + ': compile');
return
{
pre: function(scope, iElem, iAttrs){
console.log(name + ': pre link');
},
post:
function(scope, iElem, iAttrs){
console.log(name + ': post
link');
}
}
}
}
}
}

app.directive('levelOne', createDirective('levelOne'));
app.directive('levelTwo', createDirective('levelTwo'));
app.directive('levelThree', createDirective('levelThree'));

结果非常简单:让ng来处理三个嵌套指令,并且每个指令都有自己的complile,pre-link,post-link函数,每个函数都会在控制台里打印一行东西来标识自己.