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

Question

I've googled a bit and I can't find anything that details how to make Angular directives that wrap content dynamically (for example http://demos.telerik.com/kendo-ui/panelbar/angular ). I'm not very familiar with transclusion, but my understanding is it has more to do with how the Angular scopes fit together than how the HTML fits together.

Is the best way to just do a lot of DOM manipulation during the compile step? Or is there some way to use template functions to accomplish it?

EDIT: To give an example, I want this:

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

to compile to:

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

Answer 1

You could do alot of dom manipulation, but what it seems you are trying to do is provide a new template for each item inside the directive. No reason you can't make each item a directive too.

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

compiles to:

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