定义指令时“控制器"、“链接"和“编译"函数之间的区别 [英] Difference between the 'controller', 'link' and 'compile' functions when defining a directive

问题描述

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

Some places seem to use the controller function for directive logic and others use link. The tabs example on the angular homepage uses controller for one and link for another directive. What is the difference between the two?

推荐答案

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

I'm going to expand your question a bit and also include the compile function.

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

• compile function - use for template DOM manipulation (i.e., manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive. (If you also need a link function (or pre and post link functions), and you defined a compile function, the compile function must return the link function(s) because the 'link' attribute is ignored if the 'compile' attribute is defined.)

link 函数 - 通常用于注册侦听器回调(即作用域上的 $watch 表达式)以及更新 DOM(即操作iElement = 单个实例元素).它在模板被克隆后执行.例如，在

中，链接函数在

模板(tElement)被克隆(到iElement) 用于该特定

元素.$watch 允许指令收到范围属性更改的通知(范围与每个实例相关联)，这允许指令将更新的实例值呈现给 DOM.

link function - normally use for registering listener callbacks (i.e., $watch expressions on the scope) as well as updating the DOM (i.e., manipulation of iElement = individual instance element). It is executed after the template has been cloned. E.g., inside an <li ng-repeat...>, the link function is executed after the <li> template (tElement) has been cloned (into an iElement) for that particular <li> element. A $watch allows a directive to be notified of scope property changes (a scope is associated with each instance), which allows the directive to render an updated instance value to the DOM.

控制器函数 - 当另一个指令需要与该指令交互时必须使用.例如，在 AngularJS 主页上，pane 指令需要将自己添加到 tabs 指令维护的范围，因此 tabs 指令需要定义一个控制器方法(想想 API)，pane 指令可以访问/调用.

有关选项卡和窗格指令的更深入解释，以及为什么选项卡指令使用 this 在其控制器上创建函数(而不是在 $scope)，请参阅 AngularJS 控制器中的this"与 $scope.

controller function - must be used when another directive needs to interact with this directive. E.g., on the AngularJS home page, the pane directive needs to add itself to the scope maintained by the tabs directive, hence the tabs directive needs to define a controller method (think API) that the pane directive can access/call.

For a more in-depth explanation of the tabs and pane directives, and why the tabs directive creates a function on its controller using this (rather than on $scope), please see 'this' vs $scope in AngularJS controllers.

通常，您可以将方法、$watches 等放入指令的控制器或链接函数中.控制器将首先运行，这有时很重要(请参阅此 fiddle 记录 ctrl 和链接功能何时运行带有两个嵌套指令).正如 Josh 在评论中提到的，您可能想要为了与框架的其余部分保持一致，将作用域操作函数放在控制器中.

In general, you can put methods, $watches, etc. into either the directive's controller or link function. The controller will run first, which sometimes matters (see this fiddle which logs when the ctrl and link functions run with two nested directives). As Josh mentioned in a comment, you may want to put scope-manipulation functions inside a controller just for consistency with the rest of the framework.

这篇关于定义指令时“控制器"、“链接"和“编译"函数之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！