Angularjs 链接vs编译vs控制器

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

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
    }
  }
});

在文件中，他们解释说：

• 编译函数和链接函数用于角度转换的不同阶段 循环
• 控制器在指令之间共享

然而，对于我来说，不清楚哪种代码应该放在哪里

例如：我可以在compile中创建函数并将它们附加到link中的作用域，还是仅将函数附加到controller中的作用域

---

如果每个指令都有自己的控制器，那么指令之间如何共享控制器？控制器是真正共享的还是仅仅是作用域属性？

编译：

这是Angular实际编译指令的阶段。对给定指令的每次引用只调用一次此编译函数。例如，假设您正在使用ng repeat指令。ng repeat必须查找它附加到的元素，提取它附加到的html片段，并创建一个模板函数

如果您使用过把手、下划线模板或等效模板，则类似于编译它们的模板以提取模板函数。向该模板函数传递数据，该函数的返回值是html，数据位于正确的位置

编译阶段是返回模板函数的步骤。此模板函数在角度上称为链接函数

链接阶段：

链接阶段是将数据（$scope）附加到链接函数的阶段，它应该返回链接的html。由于该指令还指定了该html的位置或更改内容，因此该指令已经很好了。这是您想要对链接html进行更改的函数，即已附加数据的html。在angular中，如果在链接函数中编写代码，它通常是post link函数（默认情况下）。它是一种回调函数，在链接函数将数据与模板链接后调用

控制器：

控制器是一个放置特定于指令的逻辑的地方。这个逻辑也可以进入链接函数，但是您必须将该逻辑放在作用域上，使其“可共享”。这样做的问题是，你会用你的指令破坏范围，而这并不是你所期望的。

---

那么，如果两个指令想要彼此对话/合作，那么替代方案是什么？当然，您可以将所有这些逻辑放到一个服务中，然后使这两个指令都依赖于该服务，但这只会增加一个依赖项。另一种方法是为该作用域提供一个控制器（通常是隔离作用域？），然后当该指令“需要”另一个指令时，将该控制器注入另一个指令。有关示例，请参见angularjs.org第一页上的选项卡和窗格

另外，使用controller vs.link函数的一个很好的理由（因为它们都可以访问作用域、元素和属性）是因为您可以将任何可用的服务或依赖项传递到控制器中（并且以任何顺序），而使用link函数则无法做到这一点。请注意不同的签名：

controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {...

vs

---

我还想补充一下谷歌团队在O'Reily AngularJS一书中所说的话：

控制器-创建一个控制器，该控制器发布用于跨指令通信的API。一个很好的例子是

链接-以编程方式修改生成的DOM元素实例，添加事件侦听器，并设置数据绑定

编译-以编程方式跨指令副本修改功能的DOM模板，如在ng repeat中使用时。编译函数还可以返回链接函数来修改生成的元素实例

---

这是了解指令阶段的一个很好的示例

html

---

A

指令

允许您以声明方式扩展HTML词汇表以构建web组件。

ng-app

属性是一个指令，

ng-controller

和所有

ng-前缀属性也是一个指令。指令可以是
属性
，
标记
甚至
类
名称

，

注释

指令是如何产生的（

编译

和

实例化

）

Compile:我们将使用

Compile

函数在呈现DOM之前操作DOM，并返回一个

link

函数（该函数将为我们处理链接）。这也是放置任何需要与本指令的所有

实例共享的方法的地方

link:我们将使用
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){

     }
   };
});

使用方括号
['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
    }
  }
});

var-app=angular.module（'app'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope，$element）{
});
app.directive（'parentDirective'，function（）{
返回{
限制：'E'，
模板：“”，
控制器：函数（$scope$element）{
this.variable=“Hi Vinothbabu”
}
}
});
app.directive（'childDirective'，function（）{
返回{
限制：'E'，
模板：“我是孩子”，
替换：正确，
要求：“^parentDirective”，
链接：函数（$scope、$element、attr、parentDirectCtrl）{
<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){

     }
   };
});

? – 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.

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
    }
  }
});