在AngularJS应用启动之前，它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接，作用域会同HTML进行绑定。这个过程包含了两个阶段！
编译阶段：
在编译的阶段，angularjs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中，有可能一层套着一层，一直延深处遍历。
一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个函数没被返回（return）之前我们可以对编译后的DOM树进行修改。如果设置了compile函数，
说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
本质上，当我们设置了link选项，实际上是创建了一个postLink()
链接函数，以便compile() 函数可以定义链接函数。
编译函数(compile)负责对模板DOM进行转换。
链接函数(link)负责将作用域和DOM进行链接。
注：compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。compile: function(tEle, tAttrs, transcludeFn) {
var tplEl = angular.element('
' +' ' +'');var h2 = tplEl.find('h2');
h2.attr('type', tAttrs.type);
h2.attr('ng-model', tAttrs.ngModel);
h2.val("hello");
tEle.replaceWith(tplEl);
return function(scope, ele, attrs) {
// 连接函数
};
}
在最后return一个闭包函数，其实就是我们的所说的link函数。平常我们这样定义的compile函数很少用，多种写法，因为写起来比较复杂。
链接阶段：
用link函数创建可以操作DOM的指令。
链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义了时，编译函数会重载链接函数。（覆盖）；
// require 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在这里操作DOM，可以访问required指定的控制器
}
如果require选项提供了一个指令数组，第四个参数会是一个由每个指令所对应的控制器组成的数组。
总结：
（1）compile函数的作用就是对指令的模板函数进行转换。
（2）link函数是在模型和视图之间建立关联，包括在元素上注册监听事件。
（3）scope在连接阶段才被绑定到元素上，所以在compile阶段操作scope回报错误。
（4）一般情况下，我们只写link函数就够了。
（5）请注意，如果你编写自定义的compile函数，则自定义的link函数无效应为compile会返回一个link函数
网友评论