什么是Angularjs指令模板函数的好处？ [英] What are the benefits of a directive template function in Angularjs?

问题描述

据本文档的模板可以是一个函数，它接受两个参数，一个元素和属性并返回一个字符串值，再presenting的模板。它替换的HTML内容的当前元素。更换过程中迁移所有从旧元素的属性和类到新的。

According to the documentation a template can be a function which takes two parameters, an element and attributes and returns a string value representing the template. It replaces the current element with the contents of the HTML. The replacement process migrates all of the attributes and classes from the old element to the new one.

的编译功能涉及改造的模板DOM。它有三个参数，一个元素，属性和 transclude 功能。在 transclude 参数已经去precated。它返回一个链接功能。

The compile function deals with transforming the template DOM. It takes three parameters, an element, attributes and transclude function. The transclude parameter has been deprecated. It returns a link function.

看来，一个模板和编译的功能非常相似，可以达到同样的事情。在模板函数定义了一个模板，编译函数修改模板DOM。但是，它可以在模板函数本身来完成。我不明白为什么修改模板函数外部模板DOM。反之亦然，如果DOM可以在编译功能被修改，随后有什么需要一个模板函数<？ / p>

It appears that a template and a compile functions are very similar and can achieve the same thing. The template function defines a template and compile function modifies the template DOM. However, it can be done in the template function itself. I can't see why modify the template DOM outside the template function. And vice-versa if the DOM can be modified in the compile function then what's the need for a template function?

推荐答案

编译函数可用于改变DOM之前所得模板函数被绑定到的范围。

The compilation function can be used to change the DOM before the resulting template function is bound to the scope.

请看下面的例子：

<div my-directive></div>

您可以使用编译功能更改模板DOM是这样的：

You can use the compile function to change the template DOM like this:

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

所以，你可以使用编译功能，如果你的指令要求其更改为任何你喜欢的模板DOM。

So you can use the compile function to change the template DOM to whatever you like if your directive requires it.

在大多数情况下，特莱姆和 iElem 将是相同的DOM元素，但有时也可以，如果是不同的指令克隆的模板，杜绝多份（参见 ngRepeat ）。

In most cases tElem and iElem will be the same DOM element, but sometimes it can be different if a directive clones the template to stamp out multiple copies (cf. ngRepeat).

在幕后，角采用了2路渲染过程（编译+链接），以杜绝编译一块DOM的副本，以prevent角不必过程（=分析指令）相同的DOM结束反复进行的情况下，每个实例的指令邮票出多个克隆导致更好的性能。

Behind the scenes, Angular uses a 2-way rendering process (compile + link) to stamp out copies of a compiled piece of DOM, to prevent Angular from having to process (= parse directives) the same DOM over and over again for each instance in case the directive stamps out multiple clones resulting in much better performance.

希望帮助！

ADDED后评论：

在模板之间的区别和编译功能：

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

被称为编译函数之前该模板函数被调用。

The template function is called before the compile function is called.

虽然它们可以执行几乎相同的东西，共享相同的签名，关键的区别在于，模板函数的返回值将取代指令的内容（或完整的指令标记，如果更换：真正的），而一个编译功能，预计以编程方式更改DOM，并返回一个链接功能（或pre和后链接功能对象）

Although they can perform almost identical stuff and share the same 'signature', the key difference is that the return value of the template function will replace the content of the directive (or the complete directive markup if replace: true), while a compile function is expected to change the DOM programmatically and return a link function (or object with pre and post link function).

在这个意义上，你能想到的模板函数为某种方便的功能，为没有使用的编译功能，如果你只需要更换一个字符串值的内容。

In that sense you can think of the template function as some kind of convenience function for not having to use the compile function if you simply need to replace the content with a string value.

希望帮助！

这篇关于什么是Angularjs指令模板函数的好处？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！