blocks|key|168240|text|为什么需要控制器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168241|当您想要在DOM中嵌套指令并将link函数从父指令公开到嵌套指令时，controller和API之间的区别就开始发挥作用。|offset|length|style|CODE|168242|从docs|168243|168244|最佳实践:当您想要将一个API暴露给其他指令时，请使用控制器。否则，请使用link。|blockquote|168245|168246|168247|假设您希望有两个指令my-form和my-text-input，并且希望my-text-input指令只出现在my-form内部，而不出现在其他地方。|168248|在这种情况下，您将在定义指令my-text-input时使用parent参数说明它需要来自requires元素的控制器，例如：require:+'%5EmyForm'。现在，父元素中的控制器将被injected到link函数中，作为$scope,+element,+attributes之后的第四个参数。您可以调用该控制器上的函数并与父指令进行通信。|168249|此外，如果找不到这样的控制器，则会引发错误。|168250|为什么要使用link|168251|如果正在定义link，则不需要使用controller函数，因为$scope在controller上可用。此外，同时定义link和controller时，需要注意这两者的调用顺序(controller是在执行之前执行的)。|168252|然而，为了与角度方式保持一致，大多数使用$watchers的DOM操作和双向绑定通常是在link函数中完成的，而对子对象和$scope操作的API是在controller中完成的。这不是一个严格的规则，但这样做将使代码更加模块化，并有助于分离关注点(控制器将维护directive状态，link函数将维护DOM+%2B外部绑定)。|168253|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/guide/directive^0|0|F|4|Y|A|0|1|4|0|0|0|0|0|0|A|7|I|D|10|D|1J|7|0|E|D|U|6|1R|I|2N|8|2W|4|36|R|0|0|0|6|4|H|A|W|6|13|A|1O|4|1T|A|2I|A|0|K|9|18|4|1P|6|23|A|3N|9|3Z|4|48|3|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|J|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1K|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1N|8|@$D|1O|E|1P|F|G]|$D|1Q|E|1R|F|G]|$D|1S|E|1T|F|G]|$D|1U|E|1V|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1W|8|@$D|1X|E|1Y|F|G]|$D|1Z|E|20|F|G]|$D|21|E|22|F|G]|$D|23|E|24|F|G]|$D|25|E|26|F|G]|$D|27|E|28|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|29|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2A|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2B|8|@$D|2C|E|2D|F|G]|$D|2E|E|2F|F|G]|$D|2G|E|2H|F|G]|$D|2I|E|2J|F|G]|$D|2K|E|2L|F|G]|$D|2M|E|2N|F|G]|$D|2O|E|2P|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2Q|8|@$D|2R|E|2S|F|G]|$D|2T|E|2U|F|G]|$D|2V|E|2W|F|G]|$D|2X|E|2Y|F|G]|$D|2Z|E|30|F|G]|$D|31|E|32|F|G]|$D|33|E|34|F|G]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|35|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]]]

<h2>Why controllers are needed</h2>

The difference between <code>link</code> and <code>controller</code> comes into play when you want to nest directives in your DOM and expose API functions from the parent directive to the nested ones.

From the <a href="http://docs.angularjs.org/guide/directive" rel="noreferrer">docs</a>:

<blockquote>
 Best Practice: use controller when you want to expose an API to other directives. Otherwise use link. 
</blockquote>

Say you want to have two directives <code>my-form</code> and <code>my-text-input</code> and you want <code>my-text-input</code> directive to appear only inside <code>my-form</code> and nowhere else.

In that case, you will say while defining the directive <code>my-text-input</code> that it requires a controller from the <code>parent</code> DOM element using the require argument, like this: <code>require: '^myForm'</code>. Now the controller from the parent element will be <code>injected</code> into the <code>link</code> function as the fourth argument, following <code>$scope, element, attributes</code>. You can call functions on that controller and communicate with the parent directive.

Moreover, if such a controller is not found, an error will be raised.

<h2>Why use link at all</h2>

There is no real need to use the <code>link</code> function if one is defining the <code>controller</code> since the <code>$scope</code> is available on the <code>controller</code>. Moreover, while defining both <code>link</code> and <code>controller</code>, one does need to be careful about the order of invocation of the two (<code>controller</code> is executed before).

However, in keeping with the Angular way, most DOM manipulation and 2-way binding using <code>$watchers</code> is usually done in the <code>link</code> function while the API for children and <code>$scope</code> manipulation is done in the <code>controller</code>. This is not a hard and fast rule, but doing so will make the code more modular and help in separation of concerns (controller will maintain the <code>directive</code> state and <code>link</code> function will maintain the <code>DOM</code> + outside bindings).

blocks|key|170192|text|controller函数/对象表示一个抽象的模型-视图-控制器。虽然关于MVC没有什么新东西可写，但它仍然是angular最重要的优点:将关注点拆分成更小的部分。仅此而已，如果您需要对来自View的Model更改做出反应，那么Controller是做这项工作的合适人选。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|170193|关于link函数的故事是不同的，它来自不同的角度。一旦我们想要跨越controller/model/view+(模板)的边界，这是非常必要的。|170194|让我们从传递给link函数的参数开始：|170195|function+link(scope,+element,+attrs)+{|code-block|syntax|javascript|170196|170197|scope是一个角度作用域，object.|unordered-list-item|BOLD|170198|element是jqLite包装的元素，此指令matches.|170199|attrs是一个具有规范化属性名称及其相应值的对象。|170200|170201|为了将link放到上下文中，我们应该提到所有指令都在经历这个初始化过程步骤:编译、链接。摘自Brad+Green和Shyam+Seshadri的书Angular+JS|170202|编译阶段(+link的姊妹，让我们在这里提到它以获得一个清晰的画面)：|170203|在此阶段，Angular遍历DOM以识别模板中所有注册的指令。对于每个指令，它会根据指令的规则(template、replace、transclude等)转换DOM，并调用compile函数(如果存在)。结果是编译后的模板函数，|170204|链路阶段|170205|170206|使视图成为动态视图，然后为每个指令运行一个链接函数。链接函数通常在DOM或模型上创建侦听器。这些侦听器使视图和模型始终保持同步。|blockquote|170207|170208|170209|在这里可以找到如何使用link的一个很好的例子：Creating+Custom+Directives。参见示例：创建一个操纵DOM的指令，该指令将一个“日期-时间”插入到页面中，每秒刷新一次。|170210|上面富源代码中的一小段代码展示了对DOM的实际操作。$timeout服务有钩子函数，并在其析构函数调用中将其清除，以避免内存泄漏|170211|.directive('myCurrentTime',+function($timeout,+dateFilter)+{

+function+link(scope,+element,+attrs)+{

+...

+//+the+not+MVC+job+must+be+done
+function+updateTime()+{
+++element.text(dateFilter(new+Date(),+format));+//+here+we+are+manipulating+the+DOM
+}

+function+scheduleUpdate()+{
+++//+save+the+timeoutId+for+canceling
+++timeoutId+=+$timeout(function()+{
+++++updateTime();+//+update+DOM
+++++scheduleUpdate();+//+schedule+the+next+update
+++},+1000);
+}

+element.on('$destroy',+function()+{
+++$timeout.cancel(timeoutId);
+});

+...|170212|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/guide/directive^0|0|A|2M|4|2R|5|35|A|0|2|4|X|L|0|7|4|0|0|0|0|5|0|0|7|0|0|5|0|0|3|4|0|0|4|0|0|0|4|0|0|0|0|0|B|4|1K|9|O|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1Z|8|@$9|20|A|21|B|C]|$9|22|A|23|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|24|8|@$9|25|A|26|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|27|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|28|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|29|8|@$9|2A|A|2B|B|S]]|D|@]|E|$]]|$1|T|3|U|5|R|7|2C|8|@$9|2D|A|2E|B|S]]|D|@]|E|$]]|$1|V|3|W|5|R|7|2F|8|@$9|2G|A|2H|B|S]]|D|@]|E|$]]|$1|X|3|-4|5|6|7|2I|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2J|8|@$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|2M|8|@$9|2N|A|2O|B|S]]|D|@]|E|$]]|$1|12|3|13|5|6|7|2P|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|2Q|8|@$9|2R|A|2S|B|S]]|D|@]|E|$]]|$1|16|3|-4|5|6|7|2T|8|@]|D|@]|E|$]]|$1|17|3|18|5|19|7|2U|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|2V|8|@]|D|@]|E|$]]|$1|1B|3|-4|5|6|7|2W|8|@]|D|@]|E|$]]|$1|1C|3|1D|5|6|7|2X|8|@$9|2Y|A|2Z|B|C]|$9|30|A|31|B|S]]|D|@$9|32|A|33|1|34]]|E|$]]|$1|1E|3|1F|5|6|7|35|8|@]|D|@]|E|$]]|$1|1G|3|1H|5|L|7|36|8|@]|D|@]|E|$M|N]]|$1|1I|3|-4|5|6|7|37|8|@]|D|@]|E|$]]]|1J|$1K|$5|1L|1M|1N|E|$1O|1P]]]]

The <code>controller</code> function/object represents an abstraction model-view-controller (MVC). While there is nothing new to write about MVC, it is still the most significant advanatage of angular: split the concerns into smaller pieces. And that's it, nothing more, so if you need to react on <code>Model</code> changes coming from <code>View</code> the <code>Controller</code> is the right person to do that job.

The story about <code>link</code> function is different, it is coming from different perspective then MVC. And is really essential, once we want to cross the boundaries of a <code>controller/model/view</code> (template).

Let' start with the parameters which are passed into the <code>link</code> function:

<pre><code>function link(scope, element, attrs) {
</code></pre>

<ul>
<li>scope is an Angular scope object.</li>
<li>element is the jqLite-wrapped element that this directive matches.</li>
<li>attrs is an object with the normalized attribute names and their corresponding values.</li>
</ul>

To put the <code>link</code> into the context, we should mention that all directives are going through this initialization process steps: Compile, Link. An Extract from Brad Green and Shyam Seshadri book Angular JS:

Compile phase (a sister of link, let's mention it here to get a clear picture):

In this phase, Angular walks the DOM to identify all the registered
 directives in the template. For each directive, it then transforms the
 DOM based on the directive’s rules (template, replace, transclude, and
 so on), and calls the compile function if it exists. The result is a
 compiled template function,

Link phase:

<blockquote>
 To make the view dynamic, Angular then runs a link function for each
 directive. The link functions typically creates listeners on the DOM
 or the model. These listeners keep the view and the model in sync at
 all times.
</blockquote>

A nice example how to use the <code>link</code> could be found here: <a href="http://docs.angularjs.org/guide/directive">Creating Custom Directives</a>. See the example: Creating a Directive that Manipulates the DOM, which inserts a "date-time" into page, refreshed every second. 

Just a very short snippet from that rich source above, showing the real manipulation with DOM. There is hooked function to $timeout service, and also it is cleared in its destructor call to avoid memory leaks

<pre><code>.directive('myCurrentTime', function($timeout, dateFilter) {

 function link(scope, element, attrs) {

 ...

 // the not MVC job must be done
 function updateTime() {
 element.text(dateFilter(new Date(), format)); // here we are manipulating the DOM
 }

 function scheduleUpdate() {
 // save the timeoutId for canceling
 timeoutId = $timeout(function() {
 updateTime(); // update DOM
 scheduleUpdate(); // schedule the next update
 }, 1000);
 }

 element.on('$destroy', function() {
 $timeout.cancel(timeoutId);
 });

 ...
</code></pre>

blocks|key|2769695|text|在我的初始与link和controller函数作斗争并阅读了大量关于它们的内容之后，我想我现在有了答案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2769696|首先让了解，|2769697|简而言之，angular指令是如何工作的：|2769698|2769699|我们从一个模板开始(作为字符串或加载到字符串)|unordered-list-item|2769700|2769701|var+templateString+=+'<div+my-directive>{{5+%2B+10}}</div>';|2769702|Now，此templateString被包装为angular元素|2769703|2769704|var+el+=+angular.element(templateString);|2769705|With+el，现在我们用$compile编译它，以返回链接函数。|2769706|2769707|var+l+=+$compile(el)|2769708|事情是这样的，|2769709|-+`$compile`+walks+through+the+whole+template+and+collects+all+the+directives+that+it+recognizes.
-+All+the+directives+that+are+discovered+are+**compiled+recursively**+and+their+`link`+functions+are+collected.
-+Then,+all+the+`link`+functions+are+wrapped+in+a+new+`link`+function+and+returned+as+`l`.|code-block|syntax|javascript|2769710|​|2769711|2769712|最后，我们为这个l+(链接)函数提供了scope函数，该函数进一步使用这个scope及其对应的元素执行包装的链接函数。|2769713|2769714|l(scope)|2769715|This将template作为新节点添加到DOM中，并调用controller，后者将其监视添加到与DOM中的模板共享的scope中。|2769716|2769717|2769718|📷|atomic|2769719|2769720|比较编译与链接与控制器：|2769721|2769722|每条指令只编译一次，并保留链接函数以备重用。因此，如果有一些适用于编译后应该在指令的compile+function.|2769723|Now，中执行的指令的所有实例，我们有link函数，该函数在将模板附加到DOM时执行。因此，我们执行特定于指令的每个实例的所有操作。例如：attached+events，根据作用域改变模板，控制器应该在指令在DOM上工作时是有效的和反应的(在附加之后)。因此：|2769724|2769725|(1)设置了带链接的视图之后。$scope是我们的M，$controller是我们在M+V+C中的C|2769726|(2)通过设置监视来利用与$scope的双向绑定。|2769727|(3)预计将在控制器中添加$scope监视，因为这是在运行时监视模板的内容。|2769728|(4)最后，还使用了controller来实现相关指令之间的通信。(就像https://docs.angularjs.org/guide/directive中的myTabs示例)|2769729|(5)我们也可以在concerns.的link函数中完成所有这些工作，但这是关于分离的|2769730|因此，我们最终得到了以下内容，它完美地满足了所有的需求：|2769731|2769732|2769733|2769734|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3c68c632a64b539209010487b3360352.png|imageAlt|1|LINK|MUTABLE|url|https://docs.angularjs.org/guide/directive|2|https://ask.qcloudimg.com/http-save/yehe-900000/d16f56ed3a79fd08448723c32a9cd89b.png^0|3|2|6|4|B|A|0|3|2|0|0|0|0|N|0|0|0|1M|0|1M|0|0|W|5|E|0|0|0|15|0|15|0|0|X|5|2|D|8|0|0|0|K|0|K|0|0|7|0|0|0|1|0|0|0|1N|8|1|J|5|11|5|0|0|0|8|0|8|0|0|1V|5|8|L|3|T|A|0|0|0|1|0|0|1|0|1|0|0|0|1|0|0|C|0|0|0|1N|16|7|0|0|3M|J|4|2W|3|0|0|0|1E|F|6|R|B|0|0|P|0|0|12|D|6|0|0|2H|A|A|28|6|10|16|1|0|0|H|14|3|J|4|0|0|S|0|0|1|0|0|1|0|1|2|0|0|1|0^^$0|@$1|2|3|4|5|6|7|2R|8|@$9|2S|A|2T|B|C]|$9|2U|A|2V|B|D]|$9|2W|A|2X|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|2Y|8|@$9|2Z|A|30|B|C]]|E|@]|F|$]]|$1|I|3|J|5|6|7|31|8|@]|E|@]|F|$]]|$1|K|3|-4|5|6|7|32|8|@]|E|@]|F|$]]|$1|L|3|M|5|N|7|33|8|@$9|34|A|35|B|C]]|E|@]|F|$]]|$1|O|3|-4|5|6|7|36|8|@]|E|@]|F|$]]|$1|P|3|Q|5|6|7|37|8|@$9|38|A|39|B|C]|$9|3A|A|3B|B|D]]|E|@]|F|$]]|$1|R|3|S|5|N|7|3C|8|@$9|3D|A|3E|B|C]|$9|3F|A|3G|B|D]]|E|@]|F|$]]|$1|T|3|-4|5|6|7|3H|8|@]|E|@]|F|$]]|$1|U|3|V|5|6|7|3I|8|@$9|3J|A|3K|B|C]|$9|3L|A|3M|B|D]]|E|@]|F|$]]|$1|W|3|X|5|N|7|3N|8|@$9|3O|A|3P|B|C]|$9|3Q|A|3R|B|D]|$9|3S|A|3T|B|D]]|E|@]|F|$]]|$1|Y|3|-4|5|6|7|3U|8|@]|E|@]|F|$]]|$1|Z|3|10|5|6|7|3V|8|@$9|3W|A|3X|B|C]|$9|3Y|A|3Z|B|D]]|E|@]|F|$]]|$1|11|3|12|5|6|7|40|8|@$9|41|A|42|B|C]]|E|@]|F|$]]|$1|13|3|14|5|15|7|43|8|@]|E|@]|F|$16|17]]|$1|18|3|19|5|6|7|44|8|@$9|45|A|46|B|C]]|E|@]|F|$]]|$1|1A|3|-4|5|6|7|47|8|@]|E|@]|F|$]]|$1|1B|3|1C|5|N|7|48|8|@$9|49|A|4A|B|C]|$9|4B|A|4C|B|D]|$9|4D|A|4E|B|D]|$9|4F|A|4G|B|D]]|E|@]|F|$]]|$1|1D|3|-4|5|6|7|4H|8|@]|E|@]|F|$]]|$1|1E|3|1F|5|6|7|4I|8|@$9|4J|A|4K|B|C]|$9|4L|A|4M|B|D]]|E|@]|F|$]]|$1|1G|3|1H|5|N|7|4N|8|@$9|4O|A|4P|B|C]|$9|4Q|A|4R|B|D]|$9|4S|A|4T|B|D]|$9|4U|A|4V|B|D]]|E|@]|F|$]]|$1|1I|3|-4|5|6|7|4W|8|@]|E|@]|F|$]]|$1|1J|3|19|5|6|7|4X|8|@$9|4Y|A|4Z|B|C]]|E|@]|F|$]]|$1|1K|3|1L|5|1M|7|50|8|@$9|51|A|52|B|C]]|E|@$9|53|A|54|1|55]]|F|$]]|$1|1N|3|19|5|6|7|56|8|@$9|57|A|58|B|C]]|E|@]|F|$]]|$1|1O|3|1P|5|6|7|59|8|@$9|5A|A|5B|B|C]]|E|@]|F|$]]|$1|1Q|3|-4|5|6|7|5C|8|@]|E|@]|F|$]]|$1|1R|3|1S|5|N|7|5D|8|@$9|5E|A|5F|B|C]|$9|5G|A|5H|B|D]]|E|@]|F|$]]|$1|1T|3|1U|5|N|7|5I|8|@$9|5J|A|5K|B|C]|$9|5L|A|5M|B|D]|$9|5N|A|5O|B|D]]|E|@]|F|$]]|$1|1V|3|-4|5|6|7|5P|8|@]|E|@]|F|$]]|$1|1W|3|1X|5|6|7|5Q|8|@$9|5R|A|5S|B|C]|$9|5T|A|5U|B|D]|$9|5V|A|5W|B|D]]|E|@]|F|$]]|$1|1Y|3|1Z|5|6|7|5X|8|@$9|5Y|A|5Z|B|C]]|E|@]|F|$]]|$1|20|3|21|5|6|7|60|8|@$9|61|A|62|B|C]|$9|63|A|64|B|D]]|E|@]|F|$]]|$1|22|3|23|5|6|7|65|8|@$9|66|A|67|B|C]|$9|68|A|69|B|D]|$9|6A|A|6B|B|D]]|E|@$9|6C|A|6D|1|6E]]|F|$]]|$1|24|3|25|5|6|7|6F|8|@$9|6G|A|6H|B|C]|$9|6I|A|6J|B|C]|$9|6K|A|6L|B|D]]|E|@]|F|$]]|$1|26|3|27|5|6|7|6M|8|@$9|6N|A|6O|B|C]]|E|@]|F|$]]|$1|28|3|19|5|6|7|6P|8|@$9|6Q|A|6R|B|C]]|E|@]|F|$]]|$1|29|3|1L|5|1M|7|6S|8|@$9|6T|A|6U|B|C]]|E|@$9|6V|A|6W|1|6X]]|F|$]]|$1|2A|3|19|5|6|7|6Y|8|@$9|6Z|A|70|B|C]]|E|@]|F|$]]|$1|2B|3|-4|5|6|7|71|8|@]|E|@]|F|$]]]|2C|$2D|$5|2E|2F|2G|F|$2H|2I|2J|-4]]|2K|$5|2L|2F|2M|F|$2N|2O]]|2P|$5|2E|2F|2G|F|$2H|2Q|2J|-4]]]]

After my initial struggle with the <code>link</code> and <code>controller</code> functions and reading quite a lot about them, I think now I have the answer.

First lets understand,

How do angular directives work in a nutshell:

<ul>
<li>We begin with a template (as a string or loaded to a string)

<code>var templateString = '&lt;div my-directive&gt;{{5 + 10}}&lt;/div&gt;';</code></li>
<li>Now, this <code>templateString</code> is wrapped as an angular element

<code>var el = angular.element(templateString);</code></li>
<li>With <code>el</code>, now we compile it with <code>$compile</code> to get back the link function.

<code>var l = $compile(el)</code>

Here is what happens,

<ul>
<li><code>$compile</code> walks through the whole template and collects all the directives that it recognizes.</li>
<li>All the directives that are discovered are compiled recursively and their <code>link</code> functions are collected.</li>
<li>Then, all the <code>link</code> functions are wrapped in a new <code>link</code> function and returned as <code>l</code>.</li>
</ul></li>
<li>Finally, we provide <code>scope</code> function to this <code>l</code> (link) function which further executes the wrapped link functions with this <code>scope</code> and their corresponding elements.

<code>l(scope)</code></li>
<li>This adds the <code>template</code> as a new node to the <code>DOM</code> and invokes <code>controller</code> which adds its watches to the scope which is shared with the template in DOM.</li>
</ul>

<img src="https://i.stack.imgur.com/0PwGA.png" alt="enter image description here">

Comparing compile vs link vs controller :

<ul>
<li>Every directive is compiled only once and link function is retained for re-use. Therefore, if there's something applicable to all instances of a directive should be performed inside directive's <code>compile</code> function.</li>
<li>Now, after compilation we have <code>link</code> function which is executed while attaching the template to the DOM. So, therefore we perform everything that is specific to every instance of the directive. For eg: attaching events, mutating the template based on scope, etc.</li>
<li>Finally, the controller is meant to be available to be live and reactive while the directive works on the <code>DOM</code> (after getting attached). Therefore:

(1) After setting up the view[V] (i.e. template) with link. <code>$scope</code> is our [M] and <code>$controller</code> is our [C] in M V C

(2) Take advantage the 2-way binding with $scope by setting up watches.

(3) <code>$scope</code> watches are expected to be added in the controller since this is what is watching the template during run-time.

(4) Finally, <code>controller</code> is also used to be able to communicate among related directives. (Like <code>myTabs</code> example in <a href="https://docs.angularjs.org/guide/directive" rel="noreferrer">https://docs.angularjs.org/guide/directive</a>)

(5) It's true that we could've done all this in the <code>link</code> function as well but its about separation of concerns.</li>
</ul>

Therefore, finally we have the following which fits all the pieces perfectly :

<img src="https://i.stack.imgur.com/SAFpN.png" alt="enter image description here">

I need to perform some operations on scope and the template. It seems that I can do that in either the <code>link</code> function or the <code>controller</code> function (since both have access to the scope).

When is it the case when I have to use <code>link</code> function and not the controller?

<pre><code>angular.module('myApp').directive('abc', function($timeout) {
 return {
 restrict: 'EA',
 replace: true,
 transclude: true,
 scope: true,
 link: function(scope, elem, attr) { /* link function */ },
 controller: function($scope, $element) { /* controller function */ }
 };
}
</code></pre>

Also, I understand that <code>link</code> is the non-angular world. So, I can use <code>$watch</code>, <code>$digest</code> and <code>$apply</code>.

What is the significance of the <code>link</code> function, when we already had controller?

Angular JS: What is the need of the directive’s link function when we already had directive’s controller with scope?

我需要对作用域和模板执行一些操作。似乎我可以在link函数或controller函数中执行此操作(因为这两个函数都可以访问作用域)。什么情况下必须使用link函数而不是控制器？angular.module('myApp').directive('abc', function($timeout) {    return ...

问Angular JS:当我们已经有了带作用域的指令控制器时，还需要指令的链接函数吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular JS:当我们已经有了带作用域的指令控制器时，还需要指令的链接函数吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular JS:当我们已经有了带作用域的指令控制器时，还需要指令的链接函数吗？
EN