Angular自定义指令之compile, link, controller属性详解及实例演示

本文章主要就angularjs指令中的compile，link及controller函数的使用和区别进行详细讨论。以下是本文的结构：

directive的执行原理

compile用法

link 用法

controller 用法

compile，link及controller区别

link和controller之间传参

directive的执行原理

在详细讨论以上五点之前，先要讨论下directive的执行原理。在AngularJS应用启动前，指令都以html文本的形式保存在文本编辑器中。当该应用启动后，会进过两个阶段，即编译阶段和链接阶段。之后，作用域（scope）会同html进行绑定，应用会对html中dom的操作进行实时响应。整个过程主要有两个阶段：

编译阶段： AngularJS会遍历整个html文档并根据JS中的指令定义来处理页面上声明的指令。换句话说， 在遍历dom时，所有的指令将被收集，但对dom树还没有进行数据绑定，此时对dom操作对性能影响很小。在编译阶段，同种 directive 在不同的 dom 节点出现一次，编译也会随之执行一次。然而，在这个阶段 scope 是无法访问到的。一个指令一旦编译完成，马上就可以通过编译函数对其进行访问，编译函数的签名包含有访问指令声明坐在的元素element以及钙元素其他属性attrs的方法。这个编译函数会返回一个模板函数，包含有完整的解析树。最后，模板函数被传递给编译后的dom树中，每个指令定义的链接函数。

链接阶段： Angular 会把所有 directive 的事件监听器注册到dom中并建立对 scope（作用域）的监听，并且把一个 scope 加到 directive 中。由于链接阶段是在编译阶段之后进行的，所以这时的scope是可以访问的。

compile用法

compile函数负责对模板dom进行转换，它返回一个对象或者函数。compile本身相较于link函数不会那么频繁地使用。通常情况下，如果设置了compile函数，那就意味着可以在指令和实时数据被放到dom中之前对dom进行操作，在这个函数中进行例如添加或删除节点等dom操作都是安全的。

注意：compile和link是相斥的。如果同时设置了两项，compile返回的函数会被当作链接函数把后面定义的link函数所取代，也就是说，后面的link函数将起不到作用。

// ...
compile: function(element, attrs){
var curEle = angular.element('id');
return function(scope, element, attrs) {
//链接函数
};
}
// ...

link函数用法

link函数负责将作用域和dom进行链接，并对元素的注册事件进行监听。而在这个操作执行之前，可以手动操作dom。如果有了编译函数，它会返回一个链接函数，不需要另外定义。如果自定义指令很简单，可以从工厂函数返回一个函数来代替对象(见代码1)，这样也算是一个链接函数。一般来说，都可按照代码2来定义link函数（该函数的参数列表是固定的）。

代码1：

app.directive('myDirective', function() {
return {
pre: function(tElement, tAttrs, transclude) {
//在子元素被链接之前执行
//在这里进行dom转换不安全
//之后调用link函数将无法定位要链接的元素
}
}, {
post: function(tElement, tAttrs, transclude) {
//在子元素被链接之后执行
//这里就相当于link函数，可以省略到编译函数

}
}
});

代码2：

app.directive('myDirective', function() {
return {
link: function(scope, element, attrs, controller) {
//controller是require中指定的控制器，名字不能写错，不然对应不起来...
}
}
});

controller用法

controller这里的属性值可以是一个字符串（控制器名称）或者函数（控制器内容）。如果属性值为字符串时，会以字符串为控制器的名字，查找在应用中已经注册过的控制器的构造函数。

app.directive('myDirective', function() {
return {
controller: function($scope, $element, $attrs, $transclude) {
//controller逻辑内容
}
or
controller: 'MyController'
}
});

一般在控制器内部操作dom与AngularJS的风格不符，所以需要通过链接函数来实现这个功能。

自定义指令的控制器和link函数是可以进行互换的。控制器主要用来提供可在指令间复用的行为，但是链接函数只能在当前内部指令中定义行为，且无法在指令间复用。

compile，link及controller区别

执行顺序：

app.directive('myDirective', function() {
return {
restrict: 'AE',
compile: function(tElem, tAttrs) {
console.log(' compile start ');
return {
pre: function(scope, iElem, iAttrs) {
console.log('pre link start ');
},
//这里的post函数想当于link函数
post: function(scope, iElem, iAttrs) {
console.log('post link start ');
}
}

},
controller: function($scope, $element, $attrs) {
console.log(' controller start ');
}
};
});

结果：



可见compile函数最先执行，其次是controller，然后是pre和post（link）函数。

作用：

compile：负责对模板dom进行转换；

link： 负责将作用域和dom进行链接，并对元素的注册事件进行监听，只能在当前内部指令中定义行为，且无法在指令间复用；

controller：用来提供可在指令间复用的行为。

compile与link区别在于它们要做的事情不同，而link与controller在于这两个函数上的定位。

link和controller之间传参

请参考：http://blog.csdn.net/victoryzn/article/details/77600769