AngularJS：何时使用transclude“真”和transclude“元素”？ [英] AngularJS : When to use transclude 'true' and transclude 'element'?

问题描述

当我应该使用 transclude：真正的当 transclude：元素？
我不能找到什么transclude：元素在角文档，它们是pretty混乱

。

我会很高兴，如果有人可以用简单的语言解释这一点。
什么是每个选项的好处？它们之间的真正区别是什么？

这是我发现：

真：

  transclude
 

在编译功能，可以操作与transclude链接功能的帮助下，DOM，也可以插入transcluded DOM到使用上的任何HTML标记ngTransclude指令的模板。

和

  transclude：元素
 

此transcludes整个元件和transclude联功能是在编译函数引入的。你不能访问范围在这里，因为尚未创建范围。编译函数创建的可存取范围的指令链接功能，transcludeFn让你触摸克隆的元素（这是transcluded）为DOM操作或利用它势必范围的数据。为了您的信息，这是在NG-重复和NG-开关使用。

解决方案

从上指令 AngularJS文档：

  

transclude - 编译元素的内容，并将其提供给指令。通常与ngTransclude使用。 transclusion的优点在于，连接功能接收到一个transclusion功能是$ P $对结合于正确的范围。在典型的设置窗口小部件创建一个分离的范围，但transclusion不是一个孩子，而是分离范围的同级。这使得可以为插件有私有状态，并且transclusion要绑定到父（$ P $对 - 分离株）的范围。

  
  

    

真正 - transclude指令的内容

    
    

元素 - transclude包括较低的优先级定义的任何指令，整个元素

  

transclude：真正的

因此​​，让我们假设你有一个名为指令我-transclude真与宣布transclude：真正的，看起来像这样的：

 ＆LT; D​​IV＆GT;
  ＆LT;我-transclude-真＆gt;
    ＆LT;跨度＆GT; {{}东西}＆LT; / SPAN＆GT;
    {{otherThing}}
  ＆LT; /我-transclude-真＆gt;
＆LT; / DIV＆GT;
 

编译之后之前联系起来就变成了：

 ＆LT; D​​IV＆GT;
  ＆LT;我-transclude-真＆gt;
    ＆所述;！ -  transcluded  - ＆GT;
  ＆LT; /我-transclude-真＆gt;
＆LT; / DIV＆GT;
 

在内容 的（孩子）我-transclude真是＆LT;跨度＆GT; {{事} }＆LT; / SPAN＆GT; {{... ，是transcluded和可用的指令。

transclude：元素

如果您有一个名为我-transclude元素申报指令以 transclude：元素，看起来像这样的：

 ＆LT; D​​IV＆GT;
  ＆LT;我-transclude-组件＆gt;
    ＆LT;跨度＆GT; {{}东西}＆LT; / SPAN＆GT;
    {{otherThing}}
  ＆LT; /我-transclude-组件＆gt;
＆LT; / DIV＆GT;
 

编译之后之前联系起来就变成了：

 ＆LT; D​​IV＆GT;
   ＆所述;！ -  transcluded  - ＆GT;
＆LT; / DIV＆GT;
 

下面，在整个元素，包括其子的transcluded并提供给指令。

链接后会发生什么？

这是给你的指令做什么它需要与transclude函数来完成。 ngRepeat 使用 transclude：元素，以便它可以重复整个元素及其子范围的变化时。但是，如果你只需要更换标签，并要保留它的内容，你可以使用 transclude：真正的与 ngTransclude 指令，它可以实现这个要求。

When should I use transclude: 'true' and when transclude: 'element' ? I cant find anything about transclude: 'element' in the angular docs, they are pretty confusing.

I would be happy if someone could explain this in simple language. What is the benefit of each option? What is the real difference between them?

This is what I have found :

transclude: true

Inside a compile function, you can manipulate the DOM with the help of transclude linking function or you can insert the transcluded DOM into the template using ngTransclude directive on any HTML tag.

and

transclude: ‘element’

This transcludes the entire element and a transclude linking function is introduced in the compile function. You can not have access to scope here because the scope is not yet created. Compile function creates a link function for the directive which has access to scope and transcludeFn lets you touch the cloned element (which was transcluded) for DOM manipulation or make use of data bound to scope in it. For your information, this is used in ng-repeat and ng-switch.

解决方案

From AngularJS Documentation on Directives:

transclude - compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

true - transclude the content of the directive.

'element' - transclude the whole element including any directives defined at lower priority.

transclude: true

So let's say you have a directive called my-transclude-true declared with transclude: true that looks like this:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

After compiling and before linking this becomes:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

The content (children) of my-transclude-true which is <span>{{ something }}</span> {{..., is transcluded and available to the directive.

transclude: 'element'

If you have a directive called my-transclude-element declared with transclude: 'element' that looks like this:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

After compiling and before linking this becomes:

<div>
   <!-- transcluded -->
</div>

Here, the whole element including its children are transcluded and made available to the directive.

What happens after linking?

That's up to your directive to do what it needs to do with the transclude function. ngRepeat uses transclude: 'element' so that it can repeat the whole element and its children when the scope changes. However, if you only need to replace the tag and want to retain it's contents, you can use transclude: true with the ngTransclude directive which does this for you.

这篇关于AngularJS：何时使用transclude“真”和transclude“元素”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！