Javascript Angular JS：当我们已经有了具有作用域的指令控制器时，还需要指令的链接函数吗

发布于05月18日

我需要对范围和模板执行一些操作.似乎我可以在link函数或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 */ }
    };
}

而且，我知道link是无Angular 的世界.所以，我可以用$watch，$digest和$apply.

当我们已经有了控制器时，link函数的意义是什么？

推荐答案

在initial与link和controller函数进行了一番斗争并阅读了大量关于它们的内容之后，我想现在我找到了答案.

先让understand，

How do angular directives work in a nutshell:个

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

var templateString = '<div my-directive>{{5 + 10}}</div>';个
现在，这个templateString被包装成一个angular element

var el = angular.element(templateString);个
对于el，现在我们用$compile编译它，以获得link函数.

var l = $compile(el)个

下面是发生的情况，
- $compile遍历整个模板并收集它识别的所有指令.
- 发现的所有指令都是compiled recursively，并收集了它们的link个函数.
- 然后，所有link个函数都包装在一个新的link函数中，并作为l返回.
最后，我们为这个l(link)函数提供了scope函数，这个l(link)函数用这个scope及其相应的元素进一步执行包装的link函数.

l(scope)
这会将template作为新 node 添加到DOM中，并调用controller，后者将其监视添加到与DOM中的模板共享的scope中.

在此处输入图像描述

比较compile对link对controller:

每个指令只有一次compiled，link功能保留以供重复使用.因此，如果有适用于指令所有实例的内容，则应在指令的compile函数中执行.
现在，编译后，我们有link个函数，在将template连接到DOM时执行.因此，我们执行特定于指令的每个实例的所有操作.例如:attaching events、mutating the template based on scope等.
最后，controller意味着在指令作用于DOM(连接后)时，它可以带电和react .因此:

(1) 使用链接设置视图[V](即模板)后.$scope是我们的[M]，$controller是M V C中的[C]

(2) 通过设置手表，利用2-way与$scope的绑定.

(3) 预计控制器中会添加$scope个手表，因为这是在运行时监视模板的内容.

(4)最后，controller还用于相关指令之间的通信.(例如https://docs.angularjs.org/guide/directive个示例中的myTabs个)

(5)我们确实可以在link函数中完成所有这些操作，但大约是separation of concerns.