本文翻译自：Difference between the 'controller', 'link' and 'compile' functions when defining a directive

Some places seem to use the controller function for directive logic and others use link. 有些地方似乎将控制器功能用于指令逻辑，而其他地方则使用链接。 The tabs example on the angular homepage uses controller for one and link for another directive. 角度主页上的选项卡示例将控制器用于一个指令并将链接用于另一个指令。 What is the difference between the two? 两者有什么区别？

---

#1楼

参考：https://stackoom.com/question/qe25/定义指令时-控制器-链接-和-编译-函数之间的区别

---

#2楼

I'm going to expand your question a bit and also include the compile function. 我将扩大您的问题，并包括编译功能。

• compile function - use for template DOM manipulation (ie, manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive. 编译功能 -用于模板 DOM操纵（即，tElement =模板元素的操纵），因此适用于与指令关联的模板的所有DOM克隆的操纵。 (If you also need a link function (or pre and post link functions), and you defined a compile function, the compile function must return the link function(s) because the 'link' attribute is ignored if the 'compile' attribute is defined.) （如果您还需要一个链接功能（或前，后链接功能），你定义一个编译函数，编译函数必须返回链接功能（S），因为'link'属性将被忽略，如果'compile'属性定义。）

• link function - normally use for registering listener callbacks (ie, $watch expressions on the scope) as well as updating the DOM (ie, manipulation of iElement = individual instance element). 链接功能 -通常用于注册侦听器回调（即，作用域上的$watch表达式）以及更新DOM（即，对iElement =单个实例元素的操作）。 It is executed after the template has been cloned. 克隆模板后执行。 Eg, 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. 例如，在<li ng-repeat...> ，已经为特定的<li>元素克隆了<li>模板（tElement）（将其插入到iElement中）之后，将执行链接功能。 A $watch allows a directive to be notified of scope property changes (a scope is associated with each instance), which allows the directive to render an updated instance value to the DOM. $watch允许指令通知范围属性更改（范围与每个实例相关联），这允许指令将更新后的实例值呈现给DOM。

• controller function - must be used when another directive needs to interact with this directive. 控制器功能 -当另一个指令需要与此指令进行交互时，必须使用它。 Eg, on the AngularJS home page, the pane directive needs to add itself to the scope maintained by the tabs directive, hence the tabs directive needs to define a controller method (think API) that the pane directive can access/call. 例如，在AngularJS主页上，窗格指令需要将自身添加到tabs指令所维护的范围内，因此tabs指令需要定义一个可以访问/调用该窗格指令的控制器方法（think API）。
  
  For a more in-depth explanation of the tabs and pane directives, and why the tabs directive creates a function on its controller using this (rather than on $scope ), please see 'this' vs $scope in AngularJS controllers . 有关选项卡和窗格指令的更深入说明，以及为什么选项卡指令使用this指令（而不是在$scope ）在其控制器上创建函数，请参见AngularJS控制器中的“ this”与$ scope 。

In general, you can put methods, $watches , etc. into either the directive's controller or link function. 通常，您可以将方法， $watches等放入指令的控制器或链接函数中。 The controller will run first, which sometimes matters (see this fiddle which logs when the ctrl and link functions run with two nested directives). 控制器将首先运行，这有时很重要（请参见该小提琴 ，该日志记录了ctrl和link函数使用两个嵌套指令运行的时间）。 As Josh mentioned in a comment , you may want to put scope-manipulation functions inside a controller just for consistency with the rest of the framework. 正如Josh在评论中提到的那样，您可能希望将范围操作功能放在控制器内，只是为了与框架的其余部分保持一致。

---

#3楼

As complement to Mark's answer, the compile function does not have access to scope, but the link function does. 作为对马克回答的补充，编译功能不能访问范围，但链接功能可以。

I really recommend this video; 我真的推荐这部影片； Writing Directives by Misko Hevery (the father of AngularJS), where he describes differences and some techniques. Misko Hevery（AngularJS的父亲）的编写指令 ，他描述了差异和一些技巧。 (Difference between compile function and link function at 14:41 mark in the video ). （ 视频中14:41标记处的编译功能和链接功能之间的差异）。

---

#4楼

1. running code before Compilation : use controller 编译前运行代码：使用控制器
2. running code after Compilation : use Link 编译后运行代码：使用链接

Angular convention : write business logic in controller and DOM manipulation in link. 角度约定：在控制器中编写业务逻辑，在链接中编写DOM操作。

Apart from this you can call one controller function from link function of another directive.For example you have 3 custom directives 除此之外，您可以从另一个指令的链接函数中调用一个控制器函数，例如您有3个自定义指令

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

and you want to access animal from inside of "leopard" directive. 并且您想从“豹”指令内部访问动物。

http://egghead.io/lessons/angularjs-directive-communication will be helpful to know about inter-directive communication http://egghead.io/lessons/angularjs-directive-communication将有助于了解指令间通信

---

#5楼

compile function - 编译功能 -

1. is called before the controller and link function. 在控制器和链接功能之前被调用。
2. In compile function, you have the original template DOM so you can make changes on original DOM before AngularJS creates an instance of it and before a scope is created 在编译功能中，您拥有原始模板DOM，因此您可以在AngularJS创建它的实例之前以及在创建作用域之前对原始DOM进行更改。
3. ng-repeat is perfect example - original syntax is template element, the repeated elements in HTML are instances ng-repeat是完美的示例-原始语法是模板元素，HTML中的重复元素是实例
4. There can be multiple element instances and only one template element 可以有多个元素实例，只有一个模板元素
5. Scope is not available yet 范围尚不可用
6. Compile function can return function and object 编译函数可以返回函数和对象
7. returning a (post-link) function - is equivalent to registering the linking function via the link property of the config object when the compile function is empty. 返回一个（后链接）函数-等同于当编译函数为空时通过config对象的link属性注册链接函数。
8. returning an object with function(s) registered via pre and post properties - allows you to control when a linking function should be called during the linking phase. 返回具有通过pre和post属性注册的函数的对象-允许您控制在链接阶段何时应调用链接函数。 See info about pre-linking and post-linking functions below. 请参阅下面有关预链接和后链接功能的信息。

syntax 句法

function compile(tElement, tAttrs, transclude) { ... }

controller 控制者

1. called after the compile function 在编译函数之后调用
2. scope is available here 范围在这里可用
3. can be accessed by other directives (see require attribute) 可以通过其他指令访问（请参阅require属性）

pre - link 预先连结

1. The link function is responsible for registering DOM listeners as well as updating the DOM. 链接功能负责注册DOM侦听器以及更新DOM。 It is executed after the template has been cloned. 克隆模板后执行。 This is where most of the directive logic will be put. 这是放置大多数指令逻辑的地方。

2. You can update the dom in the controller using angular.element but this is not recommended as the element is provided in the link function 您可以使用angular.element在控制器中更新dom，但是不建议这样做，因为link函数中提供了element

3. Pre-link function is used to implement logic that runs when angular js has already compiled the child elements but before any of the child element's post link have been called 预链接功能用于实现在angular js已编译子元素但在任何子元素的post链接被调用之前运行的逻辑

post-link 链接后

1. directive that only has link function, angular treats the function as a post link 仅具有链接功能的指令，角度将功能视为后链接

2. post will be executed after compile, controller and pre-link funciton, so that's why this is considered the safest and default place to add your directive logic post将在编译，控制器和预链接功能之后执行，因此这就是为什么它被认为是添加指令逻辑的最安全和默认位置的原因