Angularjs 为什么我必须设置；trasnclude:true；在有角度的DDO中？

我知道

transclude:true

做了什么，但我一直在想：“为什么我必须在DDO中放入

transclude:true

，在模板中放入

ng transclude

？”

内部发生了什么，使得角度变得多余？是安全/XSS保护吗？表演

有三种类型的转义，具体取决于您是只转义指令元素的内容、整个元素还是元素内容的多个部分：

• true

  -排除指令元素的内容（即子节点）

• 'element'

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

• {…}

  （对象哈希）：-将内容的元素映射到模板中的转换“槽”

--

有三种类型的转义，具体取决于您是只转义指令元素的内容、整个元素还是元素内容的多个部分：

• true

  -排除指令元素的内容（即子节点）

• 'element'

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

• {…}

  （对象哈希）：-将内容的元素映射到模板中的转换“槽”

--

解释了这两种方法的区别（重点是矿山）：

[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>

我是父元素

我是儿童元素

转载内容

解释了这两种方法的区别（重点）：

[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>

我是父元素

我是儿童元素

转载内容