为什么我必须在 Angular DDO 中设置“trasnclude: true”？答案

【问题标题】：Why must I set "trasnclude: true" in an Angular DDO?为什么我必须在 Angular DDO 中设置“trasnclude: true”？
【发布时间】：2016-03-09 03:42:00
【问题描述】：

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

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

【问题讨论】：

标签： angularjs angularjs-directive transclusion

【解决方案1】：

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>

【讨论】：

【解决方案2】：

根据您是要仅嵌入指令元素的内容、整个元素还是元素内容的多个部分，共有三种嵌入：

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

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

{...}（对象哈希）：- 将内容元素映射到模板中的嵌入“槽”。

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

【讨论】：