是什么在angularjs编译和链接功能之间的差异 [英] What is the difference between compile and link function in angularjs

问题描述

深入浅出有人能解释一下吗？

该文档似乎有点钝。我没有得到本质和何时使用了另一种大局。对比这两个一个例子是真棒。

解决方案

• 编译功能 - 使用的模板 DOM操作（即tElement =模板元素操控），因此适用于该指令相关联的模板的所有DOM克隆操作




• 链接功能 - 用于注册DOM监听器（即在该实例范围$表前pressions），以及实例 DOM操作（即iElement操纵=个人实例元素）。结果，模板已被克隆后它被执行。例如，一个＆LT内部;李NG重复...>，链接功能被执行后，在＆lt; LI>模板（tElement）已被克隆（成iElement）该特定＆LT; LI>元素结果一个$腕表（）允许被通知实例范围属性更改指令（实例范围与每个实例相关联），这使得该指令呈现更新的实例值到DOM - 通过复制实例范围内的内容进入DOM的。

注意，DOM的变换所用的编译功能和/或链接功能来完成。

大多数指令只需要一个链接功能，因为大多数指令只能与特定的DOM元素实例（及其实例范围内）处理。

一个方法来帮助确定要使用的：考虑编译功能没有收到范围参数。 （我故意忽略了transclude联函数的参数，其接收范围transcluded - 这是<一个href=\"http://stackoverflow.com/questions/13183005/what-exactly-do-you-do-with-the-transclude-function-and-the-clone-linking-functi\">rarely使用）所以编译功能不能做你想做的任何事情需要（实例）的范围 - 你不能看$任何模型/实例范围属性，则可以使用实例范围内的信息不操作DOM ，你不能调用实例范围等定义的功能。

然而，编译函数（如链接功能）不能够访问的属性。所以，如果你的DOM操作不需要实例范围内，可以使用编译功能。这里的<一个href=\"http://stackoverflow.com/questions/13852248/how-to-write-a-double-and-a-ntimes-directive-for-angularjs/13873098#13873098\">an只使用编译功能，这些原因指令的例子。它检查属性，但它并不需要一个实例范围来完成其工作。

下面的一个例子也只使用编译功能的指令。该指令只需要改造模板DOM中，所以可以使用一个编译函数。

另一种方法来帮助确定要使用的：如果你没有在链接功能使用元素参数，那么你可能并不需要一个链接功能

由于大多数指令有一个链接的功能，我不会提供任何的例子 - 他们应该很容易找到

请注意，如果你需要一个编译功能和链接功能（或pre和后链接功能），编译函数必须返回链接功能（S），因为链接属性将被忽略，如果'编译'属性的定义。

另请参见

• Difference在控制器，链接和之间定义一个指令
在当前编译功能

• 戴维·史密斯的出色 NG-conf的2104对谈指令（该链接转到视频谈到有关的章节编译和链接）

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

• Difference between the 'controller', 'link' and 'compile' functions when defining a directive
• Dave Smith's excellent ng-conf 2104 talk on directives (the link goes to the section of the video that talks about compile and link)

这篇关于是什么在angularjs编译和链接功能之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！