javascript - Angular JS：当指令的控制器具有范围时，指令的链接功能需要什么？(Angular JS: What is the need of the directive’s link function when we already had directive’s controller with scope?)

Question

I need to perform some operations on scope and the template.

(我需要对范围和模板执行一些操作。)

It seems that I can do that in either the link function or the controller function (since both have access to the scope).

(似乎我可以在link函数或controller函数中执行此操作（因为它们都可以访问范围）。)

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

(什么时候我必须使用link功能而不是控制器？)

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 */ }
    };
}

Also, I understand that link is the non-angular world.

(另外，我知道link是非角度的世界。)

So, I can use $watch , $digest and $apply .

(所以，我可以使用$watch ， $digest和$apply 。)

What is the significance of the link function, when we already had controller?

(当我们已经拥有控制器时， link功能有什么意义？)

  ask by Yugal Jindle translate from so

Answer 1

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

(在我最初与link和controller功能进行斗争并阅读了很多关于它们之后，我想现在我有了答案。)

First lets understand ,

(首先让我们理解 ，)

How do angular directives work in a nutshell:

(角度指令如何工作简而言之：)

• We begin with a template (as a string or loaded to a string)

  (我们从模板开始（作为字符串或加载到字符串）)

  var templateString = '<div my-directive>{{5 + 10}}</div>';

• Now, this templateString is wrapped as an angular element

  (现在，此templateString被包装为角度元素)

  var el = angular.element(templateString);

• With el , now we compile it with $compile to get back the link function.

  (使用el ，现在我们用$compile编译它以获取链接功能。)

  var l = $compile(el)

  Here is what happens,

  (这是发生了什么，)

  • $compile walks through the whole template and collects all the directives that it recognizes.

    ($compile遍历整个模板并收集它识别的所有指令。)

  • All the directives that are discovered are compiled recursively and their link functions are collected.

    (发现的所有指令都是递归编译的，并且会收集它们的link函数。)

  • Then, all the link functions are wrapped in a new link function and returned as l .

    (然后，所有link函数都包装在一个新的link函数中，并返回为l 。)

• Finally, we provide scope function to this l (link) function which further executes the wrapped link functions with this scope and their corresponding elements.

  (最后，我们为这个l （link）函数提供了scope函数，该函数进一步用这个scope及其相应的元素执行包装的链接函数。)

  l(scope)

• This adds the template as a new node to the DOM and invokes controller which adds its watches to the scope which is shared with the template in DOM.

  (这会将template添加为DOM的新节点，并调用controller ，该controller将其监视添加到与DOM中的模板共享的范围 。)

Comparing compile vs link vs controller :

(比较编译与链接与控制器 ：)

• 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 compile function.

  (因此，如果有一些适用于指令的所有实例的东西应该在指令的compile函数内执行。)

• Now, after compilation we have link function which is executed while attaching the template to the DOM .

  (现在，在编译之后，我们有link功能，在将模板附加到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.

  (例如： 附加事件 ， 根据范围改变模板等。)

• Finally, the controller is meant to be available to be live and reactive while the directive works on the DOM (after getting attached).

  (最后，当指令在DOM （在连接之后）时， 控制器可用于实时和被动。)

  Therefore:

  (因此：)

  (1) After setting up the view[ V ] (ie template) with link.

  (（1）用链接设置视图[ V ]（即模板）后。)

  $scope is our [ M ] and $controller is our [ C ] in MVC

  ($scope是我们的[ M ]， $controller是我们在MVC中的 [ C ])

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

  (（2）通过设置手表，利用$ scope 的双向绑定。)

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

  (（3）预计将在控制器中添加$scope手表，因为这是在运行时观看模板的内容。)

  (4) Finally, controller is also used to be able to communicate among related directives.

  (（4）最后， controller还用于能够在相关指令之间进行通信。)

  (Like myTabs example in https://docs.angularjs.org/guide/directive )

  (（如https://docs.angularjs.org/guide/directive中的 myTabs示例）)

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

  (（5）确实，我们可以在link功能中完成所有这些，但关于关注点的分离 。)

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

(因此，最后我们有以下完美契合所有部分：)