如何使Angular Directive模板包装内容(Directive元素的子元素）

How to make Angular Directive templates wrap content (child elements of the directive element)

本文关键字：元素 Directive 包装 Angular 何使      更新时间：2024-01-21

我在谷歌上搜索了一些，但找不到任何详细说明如何制作动态包装内容的Angular指令的信息（例如http://demos.telerik.com/kendo-ui/panelbar/angular)。我对transclusion不是很熟悉，但我的理解是，它更多地与Angular作用域如何组合在一起有关，而不是HTML如何组合。

在编译步骤中进行大量DOM操作的最佳方式是什么？或者有没有一些方法可以使用模板函数来实现它？

编辑：举个例子，我想要这个：

<directive>
    <div id="firstChild"></div>
    <div id="secondChild"></div>
</directive>

编译为：

<directive>
    <div id="firstTemplateElement">
        <div id="firstChild"></div>
    </div>
    <div id="secondTemplateElement>
        <div id="secondChild"></div>
    </div>
</directive>

您可以执行许多dom操作，但似乎您正在尝试为指令中的每个项提供一个新模板。没有理由你不能让每一项都成为一个指令。

<directive>
    <directive-item id="firstChild"></directive-item>
    <directive-item id="secondChild"></directive-item>
</directive>

编译为：

<directive>
    <directive-item id="firstTemplateElement">
        <div id="firstChild"></div>
    </directive-item>
    <directive-item id="secondTemplateElement>
        <div id="secondChild"></div>
    </directive-item>
</directive>
相关文章：