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

Question

我已经在Google上搜索了一下，但是找不到任何详细信息说明如何使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>