链接vs编译vs控制器

Question

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

在文件中，他们解释说：

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

然而，对我来说还不清楚，哪种代码应该去哪里。

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

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

Answer 1

指令允许您以声明方式扩展HTML词汇表，以构建web组件。ng app属性是一个指令，ng controller和所有ng-前缀属性也是一个指令。指令可以是属性，标记，甚至是类名称，注释。

指令是如何产生的（编译和实例化）

Compile：我们将使用Compile函数在呈现DOM之前对其进行操作，并返回一个link函数（该函数将为我们处理链接）。这也是放置任何需要与本指令的所有实例共享的方法的地方。

link：我们将使用link函数注册特定DOM元素（从模板克隆而来）上的所有侦听器，并设置与页面的绑定。

如果在compile（）函数中设置，它们只会设置一次（这通常是您想要的）。如果在link（）函数中设置，则每次将超文本标记语言元素绑定到对象中的数据时都会设置它们。

<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链接函数。在pre-link函数中，我们有实例模板，还有来自控制器的作用域，但是模板没有绑定到作用域，仍然没有转置的内容。

Postlink函数是post link最后执行的函数。现在转换完成，模板链接到范围，并且视图将在下一个摘要周期后使用数据绑定值更新。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
    }
  }
});

Answer 2

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

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

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

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

Answer 3

编译：

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

如果您使用过把手、下划线模板或等效模板，这就像编译它们的模板来提取模板函数一样。向这个模板函数传递数据，该函数的返回值是数据位于正确位置的html。

编译阶段是Angular中返回模板函数的步骤。这个以角为单位的模板函数称为连接函数。

连接阶段：

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

控制器：

控制器是一个放置特定于指令的逻辑的地方。这个逻辑也可以进入链接函数，但是你必须把这个逻辑放在作用域上，使它“可共享”。这样做的问题是，你会用你的指令破坏范围，而这并不是你所期望的。那么，如果两个指令想要彼此对话/合作，那么替代方案是什么呢？当然，您可以将所有这些逻辑放在一个服务中，然后使这两个指令都依赖于该服务，但这只会增加一个依赖性。另一种选择是为这个范围提供一个控制器（通常是隔离范围？）然后，当另一个指令“需要”另一个指令时，这个控制器被注入到另一个指令中。请参阅angularjs第一页的选项卡和窗格。以org为例。