209

有人可以简单地解释一下吗？

文档似乎有点迟钝。我没有了解何时使用其中一个的本质和全局。一个对比两者的例子会很棒。

4

7 回答 7

217

  • compile 函数 - 用于模板DOM 操作（即 tElement = 模板元素的操作），因此适用于与指令关联的模板的所有 DOM 克隆的操作。

  • 链接函数 - 用于注册 DOM 侦听器（即，实例范围上的 $watch 表达式）以及实例DOM 操作（即，操作 iElement = 单个实例元素）。
    它在模板被克隆后执行。例如，在 <li ng-repeat...> 中，链接函数在 <li> 模板 (tElement) 被克隆（到 iElement）用于特定的 <li> 元素之后执行。
    $watch() 允许将实例范围属性更改通知指令（实例范围与每个实例相关联），这允许指令将更新的实例值呈现给 DOM——通过将内容从实例范围复制到DOM。

请注意，DOM 转换可以在 compile 函数和/或 link 函数中完成。

大多数指令只需要一个链接函数，因为大多数指令只处理特定的 DOM 元素实例（及其实例范围）。

帮助确定使用哪个方法的一种方法：考虑编译函数没有接收 scope参数。（我故意忽略了 transclude 链接函数参数，它接收一个包含的范围——这很少使用。）所以编译函数不能做任何你想做的需要（实例）范围的事情——你可以't $watch 任何模型/实例范围属性，您不能使用实例范围信息操作 DOM，您不能调用在实例范围上定义的函数，等等。

但是，编译函数（如链接函数）确实可以访问属性。因此，如果您的 DOM 操作不需要实例范围，则可以使用 compile 函数。由于这些原因，这是一个仅使用编译函数的指令示例。它检查属性，但不需要实例范围来完成其工作。

这是一个也只使用编译函数的指令示例。该指令只需要转换模板 DOM，因此可以使用编译函数。

另一种帮助确定使用哪个的方法：如果您不使用链接函数中的“元素”参数，那么您可能不需要链接函数。

由于大多数指令都有链接功能，我不会提供任何示例——它们应该很容易找到。

请注意，如果您需要编译函数和链接函数（或链接前和后链接函数），编译函数必须返回链接函数，因为如果定义了“编译”属性，则忽略“链接”属性。

也可以看看

于 2013-01-13T03:24:58.803 回答
69

我为此苦苦挣扎了几天，我觉得有必要做更多的解释。

基本上，文档提到分离在很大程度上是一种性能增强。我要重申，编译阶段主要用于在编译子元素本身之前需要修改 DOM 时。

出于我们的目的，我将强调术语，否则会令人困惑：

编译器 SERVICE ($compile) 是处理 DOM 并在指令中运行各种代码的角度机制。

compile FUNCTION 是指令中的一段代码，由编译器 SERVICE ($compile) 在特定时间运行。

关于编译功能的一些注意事项：

  1. 您不能修改 ROOT 元素（您的指令影响的那个），因为它已经从 DOM 的外部级别编译（编译服务已经扫描了该元素上的指令）。

  2. 如果要将其他指令添加到（嵌套）元素，您可以：

    1. 必须在编译阶段添加它们。

    2. 必须将编译服务注入链接阶段并手动编译元素。但是，要小心编译两次！

了解对 $compile 的嵌套和显式调用如何工作也很有帮助，因此我在http://jsbin.com/imUPAMoV/1/edit创建了一个用于查看它的游乐场。基本上，它只是将步骤记录到 console.log。

我将在此处说明您在该垃圾箱中看到的结果。对于自定义指令 tp 和 sp 的 DOM，嵌套如下：

<tp>
   <sp>
   </sp>
</tp>

Angular compile SERVICE 将调用：

tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link

jsbin 代码还具有 tp post-link FUNCTION 在第三个指令 (up) 上显式调用 compile SERVICE，该指令在最后完成所有三个步骤。

现在，我想通过几个场景来展示如何使用编译和链接来做各种事情：

场景 1：作为宏的指令

您想在模板中动态添加指令（例如 ng-show），您可以从属性派生该指令。

假设您有一个 templateUrl 指向：

<div><span><input type="text"></span><div>

你想要一个自定义指令：

<my-field model="state" name="address"></my-field>

将 DOM 变成这样：

<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>

基本上，您希望通过具有一些您的指令可以解释的一致模型结构来减少样板文件。换句话说：你想要一个宏。

这对于编译阶段很有用，因为您可以将所有 DOM 操作基于您仅从属性中知道的事物。只需使用 jQuery 添加属性：

compile: function(tele, tattr) {
   var span = jQuery(tele).find('span').first();
   span.attr('ng-show', tattr.model + ".visible." + tattr.name);
   ...
   return { 
     pre: function() { },
     post: function() {}
   };
}

操作顺序将是（您可以通过前面提到的 jsbin 看到这一点）：

  1. compile SERVICE 找到 my-field
  2. 它在指令上调用 compile FUNCTION，从而更新 DOM。
  3. 然后编译服务进入生成的 DOM，并编译（递归）
  4. compile SERVICE 然后调用 pre-link 自上而下
  5. compile SERVICE 然后调用 post-link BOTTOM UP，所以 my-field 的链接函数在内部节点被链接之后被调用。

在上面的示例中，不需要链接，因为所有指令的工作都是在 compile FUNCTION 中完成的。

在任何时候，指令中的代码都可以要求编译器 SERVICE 在其他元素上运行。

这意味着如果您注入编译服务，我们可以在链接函数中做完全相同的事情：

directive('d', function($compile) {
  return {
    // REMEMBER, link is called AFTER nested elements have been compiled and linked!
    link: function(scope, iele, iattr) {
      var span = jQuery(iele).find('span').first();
      span.attr('ng-show', iattr.model + ".visible." + iattr.name);
      // CAREFUL! If span had directives on it before
      // you will cause them to be processed again:
      $compile(span)(scope);
    }
});

如果您确定您传递给 $compile SERVICE 的元素最初是无指令的（例如，它们来自您定义的模板，或者您只是使用 angular.element() 创建它们），那么最终结果几乎是和以前一样（尽管你可能会重复一些工作）。但是，如果元素上有其他指令，您只是导致这些指令被再次处理，这可能导致各种不稳定的行为（例如，事件和手表的双重注册）。

因此，编译阶段是宏风格工作的更好选择。

场景 2：通过范围数据配置 DOM

这个来自上面的例子。假设您在操作 DOM 时需要访问范围。好吧，在这种情况下，编译部分对您来说毫无用处，因为它发生在范围可用之前。

因此，假设您想通过验证来提取输入，但您想从服务器端 ORM 类 (DRY) 导出验证，并让它们自动应用并为这些验证生成正确的客户端 UI。

您的模型可能会推动：

scope.metadata = {
  validations: {
     address: [ {
       pattern: '^[0-9]',
       message: "Address must begin with a number"
     },
     { maxlength: 100,
       message: "Address too long"
     } ]
  }
};
scope.state = {
  address: '123 Fern Dr'
};

你可能需要一个指令：

<form name="theForm">
  <my-field model="state" metadata="metadata" name="address">
</form>

自动包含正确的指令和 div 以显示各种验证错误：

<form name="theForm">
  <div>
    <input ng-model="state.address" type="text">
    <div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...

在这种情况下，您肯定需要访问范围（因为这是存储验证的地方），并且必须手动编译添加的内容，再次注意不要重复编译。（作为旁注，您需要在包含的表单标签上设置一个名称（我假设这里是 theForm），并且可以通过 iElement.parent().controller('form').$name 链接访问它） .

在这种情况下，编写编译函数是没有意义的。链接真的是你想要的。步骤是：

  1. 定义一个完全没有角度指令的模板。
  2. 定义添加各种属性的链接函数
  3. 删除您可能在顶级元素上允许的任何角度指令（my-field 指令）。它们已经被处理过，这是一种防止它们被双重处理的方法。
  4. 通过在顶级元素上调用 compile SERVICE 来完成

像这样：

angular.module('app', []).
directive('my-field', function($compile) {
  return {
    link: function(scope, iele, iattr) {
      // jquery additions via attr()
      // remove ng attr from top-level iele (to avoid duplicate processing)
      $compile(iele)(scope); // will pick up additions
    }
  };
});

当然，您可以逐个编译嵌套元素，以避免在再次编译顶级元素时不必担心 ng 指令的重复处理。

关于这种情况的最后一点说明：我暗示您将从服务器推送验证的定义，在我的示例中，我已将它们显示为范围内的数据。我把它作为一个练习让读者弄清楚如何处理需要从 REST API 中提取数据（提示：延迟编译）。

场景 3：通过链接进行双向数据绑定

当然，link 最常见的用法是通过 watch/apply 简单地连接双向数据绑定。大多数指令都属于这一类，因此在其他地方已经充分涵盖。

于 2013-12-22T06:17:59.587 回答
50

从文档：

编译器

Compiler 是一个 Angular 服务，它遍历 DOM 寻找属性。编译过程分为两个阶段。

  1. 编译：遍历 DOM 并收集所有指令。结果是一个链接函数。

  2. 链接：将指令与范围组合并生成实时视图。范围模型中的任何更改都反映在视图中，并且用户与视图的任何交互都反映在范围模型中。使范围模型成为单一的事实来源。

一些指令ng-repeat为集合中的每个项目克隆一次 DOM 元素。有一个编译和链接阶段可以提高性能，因为克隆的模板只需要编译一次，然后为每个克隆实例链接一次。

所以至少在某些情况下，这两个阶段作为优化是分开存在的。

来自@UmurKontacı：

如果你要进行 DOM 转换，它应该是compile. 如果你想添加一些行为改变的特性，它应该在link.

于 2012-08-28T17:08:23.830 回答
18

这是来自 Misko 关于指令的谈话。http://youtu.be/WqmeI5fZcho?t=16m23s

将编译器函数视为在模板上工作的东西，以及允许通过例如向模板添加类或类似的东西来更改模板本身的东西。但实际上是链接函数完成了将两者绑定在一起的工作，因为链接函数可以访问范围，并且链接函数为特定模板的每个实例化执行一次。因此，您可以在编译函数中放置的唯一类型的东西是在所有实例中通用的东西。

于 2013-01-16T13:33:16.153 回答
10

有点晚了。但是，为了未来读者的利益：

我遇到了以下视频，它以非常棒的方式解释了 Angular JS 中的编译和链接：

https://www.youtube.com/watch?v=bjFqSyddCeA

在这里复制/输入所有内容是不愉快的。我从视频中截取了几张截图，解释了编译和链接阶段的每个阶段：

在 Angular JS 中编译和链接

在 Angular JS 中编译和链接 - 嵌套指令

第二个屏幕截图有点混乱。但是，如果我们按照步骤编号，这很简单。

第一个周期：首先对所有指令执行“编译”。
第二个循环：“控制器”和“预链接”被执行（一个接一个） 第三个循环：“后链接”以相反的顺序执行（从最里面开始）

以下是代码，它演示了上述内容：

var app = angular.module('app', []);

app.controller('msg', ['$scope', function($scope){

}]);

app.directive('消息'，函数($interpolate){
    返回{

        编译：函数（tElement，tAttributes）{
            console.log(tAttributes.text + "-在编译中..");
            返回 {

                前：功能（范围，iElement，iAttributes，控制器）{
                    console.log(iAttributes.text + "-在 pre..");
                },

                发布：功能（范围，iElement，iAttributes，控制器）{
                    console.log(iAttributes.text + "-In Post..");
                }

            }
        },

        控制器：函数（$scope，$element，$attrs）{
            console.log($attrs.text + " -In controller..");
        },

    }
});

<body ng-app="app">
<div ng-controller="msg">
    <div message text="first">
        <div message text="..second">
            <div message text="....third">

            </div>              
        </div>  
    </div>
</div>

更新：

同一视频的第 2 部分可在此处获得：https ://www.youtube.com/watch?v=1M3LZ1cu7rw 该视频以一个简单的示例详细说明了如何在 Angular JS 的编译和链接过程中修改 DOM 和处理事件.

于 2016-09-27T14:10:08.837 回答
6

两个阶段：编译和链接

编译：

遍历 DOM 树寻找指令（元素/属性/类/注释）。指令的每次编译都可以修改其模板，或修改尚未编译的内容。一旦一个指令被匹配，它就会返回一个链接函数，该函数在稍后阶段用于将元素链接在一起。在编译阶段结束时，我们有一个编译指令列表及其对应的链接函数。

关联：

当一个元素被链接时，DOM 树在其在 DOM 树中的分支点处被破坏，内容被模板的已编译（和链接）实例替换。原始置换的内容要么被丢弃，要么在嵌入的情况下重新链接回模板。通过嵌入，这两个部分重新链接在一起（有点像一条链，模板部分位于中间）。当调用链接函数时，模板已经被绑定到一个范围，并被添加为元素的子元素。链接功能是您进一步操作 DOM 并设置更改侦听器的机会。

于 2014-05-29T08:27:38.747 回答
3

这个问题很老，我想做一个简短的总结，这可能会有所帮助：

  • 为所有指令实例调用一次编译
  • 编译的主要目的是返回/创建链接（可能是前/后）函数/对象。您还可以初始化在指令实例之间共享的内容。
  • 在我看来，“链接”是这个功能的一个令人困惑的名称。我更喜欢“预渲染”。
  • 为每个指令实例调用链接，其目的是准备在 DOM 中呈现指令。
于 2016-11-19T11:14:42.373 回答