分享程序员开发的那些事...
更新时间：2023-11-09 11:56:28
compile 函数 - 用于 template DOM 操作(即操作 tElement = 模板元素)，因此操作适用于与指令关联的模板的所有 DOM 克隆.>
link 函数 - 用于注册 DOM 侦听器(即实例范围内的 $watch 表达式)以及 instance DOM 操作(即，对 iElement = 单个实例元素的操作).
在模板克隆后执行.例如，在 <li ng-repeat...> 中，链接函数在 <li> 模板 (tElement) 为该特定 <li> 元素克隆(到 iElement)之后执行.
$watch() 允许指令收到实例范围属性更改的通知(实例范围与每个实例相关联)，这允许指令将更新的实例值呈现给 DOM——通过将内容从实例范围复制到DOM.
请注意，DOM 转换可以在编译函数和/或链接函数中完成.
大多数指令只需要一个链接函数，因为大多数指令只处理特定的 DOM 元素实例(及其实例范围).
帮助确定使用哪个的一种方法:考虑编译函数没有接收scope 参数.(我故意忽略了 transclude 链接函数参数，它接收一个 transcluded 范围——这是 很少使用.)所以编译函数不能做任何你想做的需要(实例)范围的事情——你可以't $watch 任何模型/实例范围属性，您不能使用实例范围信息操作 DOM，您不能调用实例范围上定义的函数等.
然而，编译函数(如链接函数)确实可以访问属性.因此，如果您的 DOM 操作不需要实例范围，您可以使用 compile 函数.这是示例 出于这些原因，只使用编译函数的指令.它检查属性，但不需要实例范围来完成其工作.
这是一个同样仅使用编译函数的指令的示例.该指令只需要转换模板DOM，因此可以使用编译函数.
帮助确定使用哪个的另一种方法:如果您不在链接函数中使用元素"参数，那么您可能不需要链接函数.
由于大多数指令都有链接功能，我不打算提供任何示例——它们应该很容易找到.
请注意，如果您需要一个编译函数和一个链接函数(或前后链接函数)，编译函数必须返回链接函数，因为如果 'compile' 属性是定义.
另见
Can someone explain in simple terms?
The docs seems a bit obtuse. I am not getting the essence and the big picture of when to use one over the other. An example contrasting the two would be awesome.
compile function - use for template DOM manipulation (i.e., manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive.
link function - use for registering DOM listeners (i.e., $watch expressions on the instance scope) as well as instance DOM manipulation (i.e., manipulation of iElement = individual instance element).
It is executed after the template has been cloned. E.g., inside an <li ng-repeat...>, the link function is executed after the <li> template (tElement) has been cloned (into an iElement) for that particular <li> element.
A $watch() allows a directive to be notified of instance scope property changes (an instance scope is associated with each instance), which allows the directive to render an updated instance value to the DOM -- by copying content from the instance scope into the DOM.
Note that DOM transformations can be done in the compile function and/or the link function.
Most directives only need a link function, since most directives only deal with a specific DOM element instance (and its instance scope).
One way to help determine which to use: consider that the compile function does not receive a scope argument. (I'm purposely ignoring the transclude linking function argument, which receives a transcluded scope -- this is rarely used.) So the compile function can't do anything you would want to do that requires an (instance) scope -- you can't $watch any model/instance scope properties, you can't manipulate the DOM using instance scope information, you can't call functions defined on the instance scope, etc.
However, the compile function (like the link function) does have access to the attributes. So if your DOM manipulations don't require the instance scope, you can use a compile function. Here's an example of a directive that only uses a compile function, for those reasons. It examines the attributes, but it doesn't need an instance scope to do its job.
Here's an example of a directive that also only uses a compile function. The directive only needs to transform the template DOM, so a compile function can be used.
Another way to help determine which to use: if you don't use the "element" parameter in the link function, then you probably don't need a link function.
Since most directives have a link function, I'm not going to provide any examples -- they should be very easy to find.
Note that if you need a compile function and a link function (or pre and post link functions), the compile function must return the link function(s) because the 'link' attribute is ignored if the 'compile' attribute is defined.
See also