为什么我必须在 Angular DDO 中设置 "trasnclude: true"？

Question

我知道 transclude: true 的作用，但我一直想知道："why must I put transclude: true in my DDO as well as a ng-transclude in my template?".

内部发生了什么迫使 angular 被裁员？是security/XSS保护？性能？

Answer 1

There are three kinds of transclusion depending upon whether you want to transclude just the contents of the directive's element, the entire element or multiple parts of the element contents:

true - transclude the content (i.e. the child nodes) of the directive's element.

'element' - transclude the whole of the directive's element including any directives on this element that defined at a lower priority than this directive. When used, the template property is ignored.

{...} (an object hash): - map elements of the content onto transclusion "slots" in the template.

-- https://docs.angularjs.org/api/ng/service/$compile#transclusion

Answer 2

ngTransclude documentation 解释了两者的区别（重点是我的）：

[ngTransclude is a] directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

这意味着：

transclude: true 表示该指令使其内容可用于嵌入。
ng-transclude表示内容应该去哪里。

启用嵌入的指令实际上不必处理其自身内容的嵌入。它可以让子元素选择放置嵌入内容的位置。

这是一个（简单的）示例，展示了父指令中的子指令如何处理嵌入：

<!-- Application template -->
<parent-el>
    <h1>Transcluded content</h1>
</parent-el>


<!-- <parent-el> template -->
<p>I am the parent element</p>
<child-el></child-el>


<!-- <child-el> template -->
<p>I am the child element</p>
<div ng-transclude></div>

这就是内容随后在页面中呈现的方式：

<!-- Rendered content -->
<parent-el>
    <p>I am the parent element</p>
    <child-el>
        <p>I am the child element</p>
        <div>
            <h1>Transcluded content</h1>
        </div>
    </child-el>
</parent-el>

为什么我必须在 Angular DDO 中设置 "trasnclude: true"？

Why must I set "trasnclude: true" in an Angular DDO?

angularjs

transclusion

angularjs-directive