Page 109 - AngularJS权威教程

10.4 AngularJS 的生命周期 89

们只能转换那些可以被安全操作的克隆DOM节点。不要进行DOM事件监听器的注册：这个操作 1
应该在链接函数中完成。
编译函数负责对模板DOM进行转换。 2

链接函数负责将作用域和DOM进行链接。在作用域同DOM链接之前可以手动操作DOM。在
实践中，编写自定义指令时这种操作是非常罕见的，但有几个内置指令提供了这样的功能。了解 3
这个流程对于理解AngularJS真正的工作方式很有帮助。
4
10.4.3 链接

用link函数创建可以操作DOM的指令。 5

链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义了时，
编译函数会重载链接函数。如果我们的指令很简单，并且不需要额外的设置，可以从工厂函数（回 6
调函数）返回一个函数来代替对象。如果这样做了，这个函数就是链接函数。
下面两种定义指令的方式在功能上是完全一样的： 7

angular.module('myApp', [])
.directive('myDirective', function() { 8
return {
pre: function(tElement, tAttrs, transclude) {
// 在子元素被链接之前执行
// 在这里进行Don转换不安全 9
// 之后调用'lihk'h函数将无法定位要链接的元素
},
post: function(scope, iElement, iAttrs, controller) { 10
// 在子元素被链接之后执行
// 如果在这里省略掉编译选项
//在这里执行DOM转换和链接函数一样安全吗
} 11
};
});
12
angular.module('myApp', [])
.directive('myDirective', function() {
return { 13
link: function(scope, ele, attrs) {
return {
pre: function(tElement, tAttrs, transclude) {
// 在子元素被链接之前执行 14
// 在这里进行Don转换不安全
// 之后调用'lihk'h函数将无法定位要链接的元素
}, 15
post: function(scope, iElement, iAttrs, controller) {
// 在子元素被链接之后执行
// 如果在这里省略掉编译选项
//在这里执行DOM转换和链接函数一样安全吗 16
}
}
} 17
});
当定义了编译函数来取代链接函数时，链接函数是我们能提供给返回对象的第二个方法，也
就是postLink函数。本质上讲，这个事实正说明了链接函数的作用。它会在模板编译并同作用域 18