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

问题描述

有些地方似乎使用控制器功能指令的逻辑和其他用途的链接。对角主页选项卡示例使用控制器之一，并链接其他指令。什么是两者之间的区别？

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

推荐答案

我要扩大你的问题了一下，还包括编译功能。

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

• 的编译功能的 - 使用的模板 DOM操作（即tElement =模板元素操控），因此适用于该模板的所有DOM克隆操作与指令相关。 （如果你还需要一个链接功能（或pre和后链接功能），你定义一个编译函数，编译函数必须返回链接功能（S），因为链接如果编译属性定义的属性被忽略。）

• 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.)

的链接功能的 - 通常用于注册监听器回调（即 $观看的范围前pressions）作为以及更新的DOM（即iElement =单个实例元素的操作）。模板已被克隆之后被执行。例如，内部的＆LT;李NG重复...＆GT; ，链接功能后执行＆LT;李＆GT; 模板（tElement）已被克隆（成iElement）该特定＆LT;立GT; 元素。 A $观看允许被通知的范围属性更改指令（一个范围与每个实例相关联），这使得该指令呈现更新的实例值到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主页上，窗格指令需要将自身添加到由标签指令维护的范围，因此标签指令需要定义一个控制器方法（想想API），该窗格指令可以访问/电话。搜索结果对于一个更深入的解释选项卡和窗格指令，为什么标签指令使用其控制器上创建了一个函数这个（而不是 $范围），请参阅<一个href=\"http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers/14168699#14168699\">'this' VS在AngularJS控制器 $范围。

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.

在一般情况下，你可以把方法， $手表等进入或者指令的控制器或链接功能。控制器将首先运行，有时事项（见本小提琴当CTRL和链路功能有两个嵌套的指令运行的日志） 。随着约什在<一提到href=\"http://stackoverflow.com/questions/14620521/how-to-write-a-directive-in-angularjs/14621193#comment20441740_14621193\">comment,你可以把它放到范围，操作功能的控制器内只为与框架的其他部分保持一致。

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屋！