395

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

4

4 回答 4

636

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

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

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

  • 控制器功能- 当另一个指令需要与该指令交互时必须使用。例如，在 AngularJS 主页上，pane 指令需要将自身添加到 tabs 指令维护的范围内，因此 tabs 指令需要定义一个控制器方法（想想 API），pane 指令可以访问/调用。

    有关 tabs 和 pane 指令的更深入解释，以及为什么 tabs 指令使用this（而不是 on $scope）在其控制器上创建函数，请参阅AngularJS 控制器中的 'this' vs $scope。

通常，您可以将方法$watches等放入指令的控制器或链接函数中。控制器将首先运行，这有时很重要（请参阅this fiddle，它记录了 ctrl 和 link 函数何时使用两个嵌套指令运行）。正如 Josh 在评论中提到的那样，您可能希望将范围操作功能放在控制器中，以与框架的其余部分保持一致。

于 2012-09-24T17:34:47.393 回答
56

作为对 Mark 回答的补充，compile 函数无法访问范围，但 link 函数可以。

我真的推荐这个视频；由 Misko Hevery（AngularJS 之父）编写的指令，他在其中描述了差异和一些技术。（视频中 14:41 处的编译功能和链接功能的区别）。

于 2013-07-16T08:39:15.813 回答
35
  1. 编译前运行代码：使用控制器
  2. 编译后运行代码：使用链接

Angular 约定：在控制器中编写业务逻辑，在链接中编写 DOM 操作。

除此之外，您可以从另一个指令的链接函数调用一个控制器函数。例如，您有 3 个自定义指令

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

并且您想从“豹”指令内部访问动物。

http://egghead.io/lessons/angularjs-directive-communication将有助于了解指令间通信

于 2014-06-04T13:48:28.577 回答
7

编译函数——

  1. 在控制器和链接函数之前调用。
  2. 在 compile 函数中，您拥有原始模板 DOM，因此您可以在 AngularJS 创建它的实例之前和创建范围之前对原始 DOM 进行更改
  3. ng-repeat 是完美的例子 - 原始语法是模板元素，HTML 中重复的元素是实例
  4. 可以有多个元素实例并且只有一个模板元素
  5. 范围尚不可用
  6. 编译函数可以返回函数和对象
  7. 返回一个（链接后）函数 - 相当于当编译函数为空时通过配置对象的链接属性注册链接函数。
  8. 返回具有通过 pre 和 post 属性注册的函数的对象 - 允许您控制在链接阶段何时应调用链接函数。请参阅下面有关预链接和后链接功能的信息。

句法

function compile(tElement, tAttrs, transclude) { ... }

控制器

  1. 在编译函数之后调用
  2. 范围在这里可用
  3. 可以被其他指令访问（参见 require 属性）

预链接

  1. 链接函数负责注册 DOM 监听器以及更新 DOM。它在模板被克隆后执行。这是放置大部分指令逻辑的地方。

  2. 您可以使用 angular.element 更新控制器中的 dom，但不建议这样做，因为该元素在链接函数中提供

  3. pre-link 函数用于实现在 angular js 已经编译了子元素但在任何子元素的 post 链接被调用之前运行的逻辑

后链接

  1. 仅具有链接功能的指令，角度将该功能视为发布链接

  2. post 将在编译、控制器和预链接功能之后执行，这就是为什么这被认为是添加指令逻辑的最安全和默认位置

于 2016-07-28T09:15:41.400 回答