Question

我知道transclude: true做了什么，但我一直想知道：“为什么我必须将transclude: true放入我的DDO以及ng-transclude in我的模板？“。

内部发生了什么迫使角度变得多余？是安全/ XSS保护？性能

Answer 1

根据您是否只想转换指令元素的内容，整个元素或元素内容的多个部分，有三种转换：


true - 转换指令元素的内容（即子节点）。

'element' - 转换整个指令的元素，包括在此元素上以低于此指令的优先级定义的任何指令。使用时，将忽略模板属性。

{...}（对象哈希）： - 将内容元素映射到transclusion＆＃34; slots＆＃34;在模板中。

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

Answer 2

ngTransclude documentation解释了两者的分离（强调我的）：

[ngTransclude是一个]指令，用于标记使用包含的最近父指令的被转换DOM的插入点。

这意味着：

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”？

2 个答案: