链接vs编译与控制器

Question

链接vs编译与控制器

创建指令时，可以将代码放入编译器，链接函数或控制器中。

在文档中，他们解释说：

• 编译和链接功能用于角度循环的不同阶段

• 控制器在指令之间共享

但是，对我而言，目前尚不清楚哪种代码应该去哪里。

例如：我可以在编译中创建函数并将它们附加到链接中的作用域，还是仅将函数附加到控制器中的作用域？

如果每个指令都有自己的控制器，控制器如何在指令之间共享？控制器是真的共享还是只是范围属性？

Answer 1

编译：这是Angular实际编译指令的阶段。对于给定指令的每个引用，只调用一次此编译函数。例如，假设您正在使用ng-repeat指令。ng-repeat必须查找它所附加的元素，提取它所附加的html片段并创建模板函数。如果您使用过HandleBars，下划线模板或等效模板，就像编译模板以提取模板函数一样。对于此模板函数，您传递数据，该函数的返回值是html，数据位于正确的位置。编译阶段是Angular中返回模板函数的步骤。角度中的此模板函数称为链接函数。链接阶段：链接阶段是将数据（$ scope）附加到链接函数的位置，它应该返回链接的html。由于该指令还指定了这个html的去向或更改的内容，因此它已经很好了。这是您要对链接的html进行更改的功能，即已经附加了数据的html。在角度中如果你在链接函数中编写代码，它通常是post-link函数（默认情况下）。它是一种在链接函数将数据与模板链接后调用的回调。控制器：控制器是您放置某些指令特定逻辑的地方。这个逻辑也可以进入链接函数，但是你必须将该逻辑放在范围上以使其“可共享”。问题在于，您将使用指令来破坏范围，而这些东西实际上并不是预期的。那么，如果两个指令希望彼此交谈/相互合作，那么又有什么选择呢？当然，您可以将所有逻辑放入服务中，然后使这两个指令依赖于该服务，但这只会带来一个依赖性。另一种方法是为这个范围提供一个控制器（通常是隔离范围？），然后当该指令“需要”另一个指令时，该控制器被注入另一个指令。

Answer 2

我还想补充一下Google团队的O'Reily AngularJS书所说的内容：控制器 - 创建一个控制器，该控制器发布用于跨指令进行通信的API。一个很好的例子是指令传播指令链接 - 以编程方式修改生成的DOM元素实例，添加事件侦听器以及设置数据绑定。编译 - 以编程方式修改指令副本中的功能的DOM模板，如在ng-repeat中使用时。您的编译函数也可以返回链接函数来修改结果元素实例。

Answer 3

A&nbsp;directive允许您以声明方式扩展HTML词汇表以构建Web组件。该ng-app属性是一个指令，所以是ng-controller所有的ng- prefixed attributes。指令可以是attributes，tags甚至class&nbsp;names是comments。指令如何诞生（compilation和instantiation）编译：我们将在呈现之前将该compile函数用于manipulateDOM并返回一个link函数（将为我们处理链接）。这也是放置任何需要与所有instancesthis指令共享的方法的地方。link：我们将使用该link函数注册特定DOM元素上的所有侦听器（从模板克隆）并设置我们对页面的绑定。如果设置在compile()函数中，它们只会被设置一次（这通常是你想要的）。如果在link()函数中设置，则每次将HTML元素绑定到对象中的数据时都会设置它们。<div&nbsp;ng-repeat="i&nbsp;in&nbsp;[0,1,2]"> &nbsp;&nbsp;&nbsp;&nbsp;<simple> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>Inner&nbsp;content</div> &nbsp;&nbsp;&nbsp;&nbsp;</simple></div>app.directive("simple",&nbsp;function(){ &nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;"EA", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transclude:true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;template:"<div>{{label}}<div&nbsp;ng-transclude></div></div>",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;compile:&nbsp;function(element,&nbsp;attributes){&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pre:&nbsp;function(scope,&nbsp;element,&nbsp;attributes,&nbsp;controller,&nbsp;transcludeFn){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post:&nbsp;function(scope,&nbsp;element,&nbsp;attributes,&nbsp;controller,&nbsp;transcludeFn){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;controller:&nbsp;function($scope){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;}; });Compile函数返回pre和post链接函数。在预链接函数中，我们有实例模板以及范围controller，但是模板没有绑定到范围，仍然没有被转换的内容。Postlink function是post link是最后一个执行的函数。现在transclusion已经完成了the template is linked to a scope，和view will update with data bound values after the next digest cycle。该link选项只是设置post-link功能的快捷方式。controller：指令控制器可以传递给另一个指令链接/编译阶段。它可以作为在指令间通信中使用的手段注入其他指南。您必须指定所需指令的名称 - 它应绑定到同一元素或其父元素。该名称可以带有以下前缀：?&nbsp;–&nbsp;Will&nbsp;not&nbsp;raise&nbsp;any&nbsp;error&nbsp;if&nbsp;a&nbsp;mentioned&nbsp;directive&nbsp;does&nbsp;not&nbsp;exist.^&nbsp;–&nbsp;Will&nbsp;look&nbsp;for&nbsp;the&nbsp;directive&nbsp;on&nbsp;parent&nbsp;elements,&nbsp;if&nbsp;not&nbsp;available&nbsp;on&nbsp;the&nbsp;same&nbsp;element.使用方括号[‘directive1′, ‘directive2′, ‘directive3′]需要多个指令控制器。var&nbsp;app&nbsp;=&nbsp;angular.module('app',&nbsp;[]);app.controller('MainCtrl',&nbsp;function($scope,&nbsp;$element)&nbsp;{});app.directive('parentDirective',&nbsp;function()&nbsp;{ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'E', &nbsp;&nbsp;&nbsp;&nbsp;template:&nbsp;'<child-directive></child-directive>', &nbsp;&nbsp;&nbsp;&nbsp;controller:&nbsp;function($scope,&nbsp;$element){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.variable&nbsp;=&nbsp;"Hi&nbsp;Vinothbabu" &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}});app.directive('childDirective',&nbsp;function()&nbsp;{ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;&nbsp;'E', &nbsp;&nbsp;&nbsp;&nbsp;template:&nbsp;'<h1>I&nbsp;am&nbsp;child</h1>', &nbsp;&nbsp;&nbsp;&nbsp;replace:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;require:&nbsp;'^parentDirective', &nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function($scope,&nbsp;$element,&nbsp;attr,&nbsp;parentDirectCtrl){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//you&nbsp;now&nbsp;have&nbsp;access&nbsp;to&nbsp;parentDirectCtrl.variable &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}});