javascript - 如何使 Angular Directive 模板包裹内容(directive 元素的子元素)

Question

我用谷歌搜索了一下，但找不到任何详细说明如何制作动态包装内容的 Angular 指令的内容(例如 http://demos.telerik.com/kendo-ui/panelbar/angular )。我不太熟悉嵌入，但我的理解是，它更多地与 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>

Answer 1

您可以进行大量 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>