Angular JS：当我们已经有了带范围的指令控制器时，指令的链接功能有什么需求？

小编典典

Angular JS：当我们已经有了带范围的指令控制器时，指令的链接功能有什么需求？

angularjs

我需要对范围和模板执行一些操作。似乎我可以在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是非角度的世界。所以，我可以使用$watch，$digest和$apply。

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

阅读 240

2020-07-04

共1个答案

小编典典

在与和函数进行 最初的 斗争并阅读了很多有关它们的内容之后，我认为现在我有了答案。link``controller

首先让理解，

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

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

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

现在，将templateString其包装为 角形元素

var el = angular.element(templateString);

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

var l = $compile(el)

这是发生了什么事

* `$compile` 遍历整个模板并收集其识别的所有指令。
* 所发现的所有指令均以 **递归** 方式 **编译** 并`link`收集其功能。
* 然后，所有`link`函数都包装在一个新`link`函数中，并以形式返回`l`。

最后，我们scope为该l（链接）函数提供函数，该函数进一步使用this scope和它们的相应元素执行包装的链接函数。

l(scope)

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

在此处输入图片说明

比较 compile vs link 和 controller ：

每个指令只能编译一次，链接功能将保留以供重复使用。因此，如果某条指令适用于指令的所有实例，则应在指令的compile功能内执行。
现在，在编译之后，我们有了link将模板附加到 DOM时 执行的功能。因此，因此我们执行特定于指令每个实例的所有操作。例如： 附加事件 ， 基于范围更改模板 等。
最后，当指令在上运行时（附加后），该 控制器 应处于活动状态和反应状态DOM。因此：

（1）设置带有链接的视图[ V* ]（即模板）后。$scope是我们的[ M ]，$controller也是我们在 MVC中的
[ C ] *

（2）通过设置手表来利用 $ scope 进行 2向绑定。

（3）$scope期望在控制器中添加监视，因为这是在运行时监视模板。

（4）最后，controller还用于能够在相关指令之间进行通信。（myTabs例如 https://docs.angularjs.org/guide/directive中的示例）

（5）的确，我们也可以在link函数中完成所有这些操作，但它只 涉及关注点分离 。

2020-07-04