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

Question

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

Answer 1

我将稍微扩展你的问题,并包括编译功能.

编译函数 - 用于模板 DOM操作(即操作tElement = template元素),因此适用于与指令关联的模板的所有DOM克隆的操作.(如果还需要链接函数(或前后链接函数),并且定义了编译函数,则编译函数必须返回链接函数,因为'link'如果'compile'定义了属性,则忽略该属性.)
链接函数 - 通常用于注册侦听器回调(即$watch作用域上的表达式)以及更新DOM(即,操作iElement =单个实例元素).它在克隆模板后执行.例如,在an中<li ng-repeat...>,在将<li>模板(tElement)克隆到该特定<li>元素(到iElement)之后执行链接功能.A $watch允许指令通知范围属性更改(范围与每个实例关联),这允许指令将更新的实例值呈现给DOM.
controller函数 - 当另一个指令需要与该指令交互时必须使用.例如,AngularJS主页上,窗格指令需要将自身添加到由标签指令维护的范围,因此标签指令需要定义一个控制器方法(认为API),该窗格指令可以访问/调用.

有关tab和pane指令的更深入说明,以及tabs指令使用this(而不是on $scope)在其控制器上创建函数的原因,请参阅AngularJS控制器中的'this'vs $ scope.

通常,您可以将方法$watches等放入指令的控制器或链接函数中.控制器将首先运行,这有时很重要(当ctrl和link函数使用两个嵌套指令运行时,请参阅此小提琴.正如Josh在评论中提到的那样,您可能希望将范围操作函数放在控制器中,以便与框架的其余部分保持一致.

Answer 2

作为Mark答案的补充,编译函数无法访问范围,但链接函数可以访问范围.

我真的推荐这个视频; 由Misko Hevery(AngularJS之父)撰写指令,描述差异和一些技巧.(视频中14:41标记的编译功能和链接功能之间的差异).

+1是视频的链接.这是非常翔实的. (3认同)
http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/ (2认同)

Answer 3

Angular约定:在控制器中编写业务逻辑,在链接中编写DOM操作.

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

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

并且你想从"豹子"指令里面访问动物.

Answer 4

编译功能 -

句法

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

调节器

预先链接

后链接