Angularjs中的指令模板函数有什么好处？

Question

根据文档，a
template可以是一个带有两个参数的函数，分别为element和，attributes并返回表示模板的字符串值。它将当前元素替换为HTML的内容。替换过程将所有属性和类从旧元素迁移到新元素。

该compile函数处理转换模板DOM。它包含三个参数element，attributes和和transclude函数。该transclude参数已被弃用。它返回一个link函数。

似乎a template和a
compile函数非常相似，可以实现相同的目标。该template函数定义的模板和compile功能修改模板DOM。但是，它可以在template函数本身中完成。我看不到为什么要在template函数外部修改模板DOM
。反之亦然，如果可以在compile函数中修改DOM，那么对函数的需求是template什么？

Answer 1

在将结果模板功能绑定到作用域之前，可以使用编译功能来更改DOM。

考虑以下示例：

<div my-directive></div>

您可以使用compile函数更改模板DOM，如下所示：

app.directive('myDirective', function(){
  return {

    // Compile function acts on template DOM
    // This happens before it is bound to the scope, so that is why no scope
    // is injected
    compile: function(tElem, tAttrs){

      // This will change the markup before it is passed to the link function
      // and the "another-directive" directive will also be processed by Angular
      tElem.append('<div another-directive></div>');

      // Link function acts on instance, not on template and is passed the scope
      // to generate a dynamic view
      return function(scope, iElem, iAttrs){

        // When trying to add the same markup here, Angular will no longer
        // process the "another-directive" directive since the compilation is
        // already done and we're merely linking with the scope here
        iElem.append('<div another-directive></div>');
      }
    }
  }
});

因此，compile如果指令需要，则可以使用该函数将模板DOM更改为所需的内容。

在大多数情况下tElem，iElem它将是相同的DOM元素，但是有时，如果指令克隆模板以标记出多个副本，则它可能会有所不同（参见ngRepeat）。

在幕后，Angular使用2向渲染过程（编译+链接）来标记出已编译的DOM的副本，以防止Angular为每个实例一遍又一遍地处理（=解析指令）相同的DOM。以防该指令淘汰多个克隆，从而获得更好的性能。

希望有帮助！

评论后添加：

template和compile函数之间的区别：

模板功能

{
    template: function(tElem, tAttrs){

        // Generate string content that will be used by the template
        // function to replace the innerHTML with or replace the
        // complete markup with in case of 'replace:true'
        return 'string to use as template';
    }
}

编译功能

{
    compile: function(tElem, tAttrs){

        // Manipulate DOM of the element yourself
        // and return linking function
        return linkFn(){};
    }
}

在调用编译函数之前，先调用模板函数。

尽管它们可以执行几乎相同的工作并共享相同的“签名”，但主要区别在于，模板函数的返回值将替换指令的内容（或完整的指令标记，如果replace: true），而编译函数则有望以编程方式更改DOM并返回链接功能（或具有链接前和链接功能的对象）。

从这种意义上讲，您可以将模板函数视为某种便捷函数，如果您只需要用字符串值替换内容，则不必使用编译函数。

希望有帮助！