Angular.js中指令compile与link原理剖析

AngularJS中的Compile与Link

在AngularJS中，当我们设置了link选项时，实际上是创建了一个postLink()链接函数，以便compile()函数可以定义这个链接函数。

编译(compile)和链接(link)的职责

• 编译(compile) 函数负责对模板DOM进行转换。
• 链接(link) 函数负责将作用域(Scope)和DOM进行链接。

Compile与Link的区别

• Compile函数

  • 对指令的模板进行转换。

• Link函数

  • 在模型(Model)和视图(View)之间建立关联，并包括在元素上注册事件监听。
  • 作用域(Scope)在链接阶段才会被绑定到元素上，因此在compile阶段操作scope会报错。
  • 对于同一个指令的多个实例，compile只会执行一次；而link对于指令的每个实例都会执行一次。
  • 在一般情况下，我们只需要编写link函数即可。
  • 如果你自定义了compile函数，那么自定义的link函数将会无效，因为compile函数应该返回一个link函数供后续处理。

示例代码

// require 'SomeController'
link: function(scope, element, attrs, SomeController) {
    // 在这里操作DOM，可以访问required指定的控制器
}