AngularJS：什么是指令的链接功能的需要时，我们已经有了指令与控制的范围？ [英] AngularJS: What is the need of the directive's link function when we already had directive's controller with scope?

问题描述

我需要在范围和模板，执行某些操作。看来，我能做到这一点在任何链接函数或控制器函数（因为都可以访问的范围内）

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

当它是这样，当我不得不使用链接功能，而不是控制？

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

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. So, I can use $watch, $digest and $apply.

更新

什么是链接函数的意义是什么？ （当我们有控制的话）

What is the significance of link function ? ( When we had controller already )

推荐答案

我的初始与链接斗争后和控制器功能和阅读了不少关于他们的，我觉得我现在有答案了。

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

首先让了解

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

• 我们一开始就有一个模板（如字符串或加载到一个字符串）

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

VAR templateString ='＆LT; D​​IV我-指令＆GT; {{5 + 10}}＆LT; / DIV＆GT;';

现在，这个 templateString 被包装为角元素

VAR EL = angular.element（templateString）;

通过报，现在我们用 $编译编译找回链接。 功能。

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

变种L = $编译（EL）

下面是什么情况，

• $编译遍历整个模板，并收集所有它能够识别的指令。


• 所有被发现的指令是的编译递归和链接功能被收集。


• 然后，所有的链接功能被包裹在一个新的链接函数返回→。

• $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.

最后，我们提供范围这个→（链接）功能，进一步执行包裹链接函数与此范围及其相应的元素。

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

L（范围）

这增加了模板作为一个新节点 DOM 并调用控制器这增加了它的手表到在范围这是与DOM模板共享。

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.

比较编译 VS 链接 VS 控制器

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.

现在，编译之后我们有链接这是同时连接在模板到 DOM 。如此，因此，我们进行的一切，是特定于指令的每个实例。对于例如：附加活动 变异的基础上范围等模板

Now, after compilation we have link 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.

最后，在控制器，就是要提供给被直播和无功而该指令适用于 DOM （获得后附后）。因此：

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

（1）建立视图后[ V ]（即模板）与链接。 $范围是我们的[ M ]和 $控制器是我们的[Ç ]中的 MVC

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

（2）利用在 2路通过设置与手表的 $范围绑定。

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

（3） $范围预计手表在控制器中添加，因为这是在看在运行时的模板。

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

（4）最后，控制器也用于能够相关指令之间进行通信。 （如 myTabs 例如<一个href=\"https://docs.angularjs.org/guide/directive\">https://docs.angularjs.org/guide/directive)

(4) Finally, controller is also used to be able to communicate among related directives. (Like myTabs example in https://docs.angularjs.org/guide/directive)

（5）这是真的，我们可以做这一切在链接功能为好，但它是关于关注分离。

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

所以，最后我们有一个适合所有的作品完美如下：

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

这篇关于AngularJS：什么是指令的链接功能的需要时，我们已经有了指令与控制的范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！