链接vs编译vs控制器
在创建指令时，可以将代码放入编译器，链接函数或控制器中。
在文档中，他们解释说：
但是，对于我而言，还不清楚哪种代码应该到哪里去。
例如：我可以在编译时创建函数，并将它们连接到作用域的链接中，或者只将函数附加到控制器的作用域中？
如果每个指令都有自己的控制器，控制器之间如何共享控制器？ 控制器是真的共享还是只是范围属性？
编译：
这是Angular实际编译您的指令的阶段。 对于给定指令的每个引用，该编译函数仅被调用一次。 例如，假设你正在使用ng-repeat指令。 ng-repeat将不得不查找它所连接的元素，提取它所连接的html片段并创建一个模板函数。
如果你已经使用了HandleBars，下划线模板或类似的东西，就像编译它们的模板来提取模板函数一样。 对于此模板函数，您传递数据，并且该函数的返回值是正确位置的数据。
编译阶段是Angular中的那一步，它返回模板函数。 这个角度模板函数被称为链接函数。
链接阶段：
链接阶段是将数据（$ scope）附加到链接函数的地方，它应该返回链接的html。 由于该指令还指定了这个html去哪里或者它发生了什么变化，这已经很不错了。 这是您想更改链接html的功能，即已经附加了数据的html。 如果你在链接函数中编写代码，它通常是后链接函数（默认情况下）。 这是一种回调，在链接函数将数据链接到模板后被调用。
控制器：
控制器是您放置一些指令特定逻辑的地方。 这个逻辑也可以进入链接功能，但是您必须将该逻辑放在范围中才能使其“可共享”。 这样做的问题是，你会用你的指令来破坏范围，这不是真正意义上的东西。 那么，如果两个指令想互相交流/合作，还有什么选择？ 当然，你可以把所有的逻辑放到一个服务中，然后使这两个指令都依赖于那个服务，但这只会导致一个依赖。 另一种方法是为这个范围提供一个Controller（通常是隔离范围？），然后当该指令“需要”另一个指令时，该控制器被注入到另一个指令中。 例如，查看angularjs.org第一页上的选项卡和窗格。
我还想补充一下Google团队的O'Reily AngularJS书籍：
控制器 - 创建一个控制器，发布用于通过指令进行通信的API。 指令通信指令就是一个很好的例子
链接 - 以编程方式修改生成的DOM元素实例，添加事件监听器并设置数据绑定。
编译 - 以编程方式修改指令拷贝上的功能的DOM模板，就像在ng-repeat中使用一样。 您的编译函数也可以返回链接函数来修改生成的元素实例。
directive允许您以声明方式扩展HTML词汇表以构建Web组件。 ng-app属性是一个指令， ng-controller和所有ng-controller ng- prefixed attributes 。 指令可以是attributes ， tags ，甚至class names ， comments 。
指令如何诞生（ compilation和instantiation ）
编译：我们将使用compile函数来manipulate DOM，然后返回一个link函数（它将处理我们的链接）。 这也是放置任何需要与该指令的所有instances共享的方法的地方。
链接：我们将使用link函数将特定DOM元素（从模板克隆）上的所有侦听器注册并设置我们对页面的绑定。
如果在compile()函数中设置，它们只会被设置一次（这通常是您想要的）。 如果在link()函数中设置，则每当HTML元素绑定到数据时，它们都会被设置
目的。
<div ng-repeat="i in [0,1,2]">
<simple>
<div>Inner content</div>
</simple>
</div>
app.directive("simple", function(){
return {
restrict: "EA",
transclude:true,
template:"<div>{{label}}<div ng-transclude></div></div>",
compile: function(element, attributes){
return {
pre: function(scope, element, attributes, controller, transcludeFn){
},
post: function(scope, element, attributes, controller, transcludeFn){
}
}
},
controller: function($scope){
}
};
});
Compile函数返回pre和post链接功能。 在预链接函数中，我们有实例模板和controller的作用域，但模板没有绑定到作用域，仍然没有被转义的内容。
Post链接功能是帖子链接是执行的最后一个功能。 现在transclusion完成后， the template is linked to a scope ，而view will update with data bound values after the next digest cycle 。 link选项只是设置post-link功能的快捷方式。
控制器：指令控制器可以传递到另一个指令链接/编译阶段。 它可以被注入到其他直接指令中，作为指导间通信的一种手段。
您必须指定要求指令的名称 - 它应该绑定到相同的元素或其父级。 该名称可以加上前缀：
? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.
使用方括号['directive1′, 'directive2′, 'directive3′]要求多个指令控制器。
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('parentDirective', function() {
return {
restrict: 'E',
template: '<child-directive></child-directive>',
controller: function($scope, $element){
this.variable = "Hi Vinothbabu"
}
}
});
app.directive('childDirective', function() {
return {
restrict: 'E',
template: '<h1>I am child</h1>',
replace: true,
require: '^parentDirective',
link: function($scope, $element, attr, parentDirectCtrl){
//you now have access to parentDirectCtrl.variable
}
}
});
上一篇: Link vs compile vs controller
下一篇: AngularJS : Difference between the $observe and $watch methods