如何使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>