javascript - 定义指令时 'controller' 、 'link' 和 'compile' 函数之间的区别

Question

有些地方似乎将 Controller 功能用于指令逻辑，而其他地方则使用链接。 angular 主页上的选项卡示例使用 Controller 作为一个指令并使用链接作为另一个指令。两者有什么区别？

Answer 1

我将扩展您的问题并包括编译功能。

编译函数 - 用于 模板 DOM 操作(即对 tElement = 模板元素的操作)，因此操作适用于与指令关联的模板的所有 DOM 克隆。 (如果您还需要一个链接函数(或前链接和后链接函数)，并且您定义了一个编译函数，则编译函数必须返回链接函数，因为如果 'link' 属性是定义。)

链接函数 - 通常用于注册监听器回调(即 'compile' 作用域上的表达式)以及更新 DOM(即操作 iElement = 单个实例元素)。它在模板被克隆后执行。例如，在 $watch 内，链接函数在<li ng-repeat...>之后执行模板 (tElement) 已为该特定 <li> 克隆(到 iElement)元素。一个 <li>允许指令被通知范围属性更改(范围与每个实例相关联)，这允许指令将更新的实例值呈现给 DOM。

Controller 功能 - 当另一个指令需要与该指令交互时必须使用。例如，在 AngularJS 主页上，pane 指令需要将自己添加到 tabs 指令维护的范围，因此 tabs 指令需要定义一个 Controller 方法(想想 API)，pane 指令可以访问/调用。更深入地解释选项卡和 Pane 指令，以及为什么选项卡指令使用 $watch 在其 Controller 上创建一个函数(而不是在 this 上)，请参阅 'this' vs $scope in AngularJS controllers .

一般来说，你可以放置方法，$scope等进入指令的 Controller 或链接函数。 Controller 将首先运行，这有时很重要(请参阅此 fiddle，它记录 ctrl 和链接函数何时使用两个嵌套指令运行)。正如乔希在 comment 中提到的，您可能希望将范围操作功能放在 Controller 中，以便与框架的其余部分保持一致。