1

Angular UI, has support only for basic tabs. I wanted to create a directive that would support nested tabs & advanced headings (that can include html).

I think, that the best syntax would be

<tabs>
    <tab>
        <title><i class="myIcon"></i> Title 1</title>
        <p>Content 1</p>
    </tab>
    <tab>
        <title class="pull-right">Title 2 (Nested)</title>
            <tab>
                <title>Title 2.1</title>
                <p>Content 2.1</p>
            </tab>
        <p>Content 2</p>
    </tab>
</tabs>

My problem with this approach, is that I would need 2 ng-transclude - one for panes and one for titles.

As it would be very easy to do the first ng-transclude (just like in the tutorial):

<div>
    <ul>
        <li ng-repeat="pane in panes" transclude-title></li>
    </ul>
    <div class="tab-content" ng-transclude="">
    </div>
</div>

I don't have any idea how can I transclude titles here? How can I preserve nested structure of tabs ?

Maybe there is a better solution to this problem ?

g00fy
  • 4,717
  • 1
  • 30
  • 46
  • 1
    You can get the transclusion as the 3rd parameter to your `compile` function, and manually traverse it. – Joseph Silber Apr 24 '13 at 01:02
  • Why don't you create your own directives. Based on your statement of "nested tabs", you could check out [this](http://stackoverflow.com/questions/12863663/angularjs-complex-nesting-of-partials-and-templates) article which demonstrates how nested directives can be used to create nested views (or nested tabs in your case). – callmekatootie Apr 24 '13 at 08:03

1 Answers1

6

This is a multiple transclude example. I hope it points you into the right direction.

http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=preview

marco alves
  • 1,707
  • 2
  • 18
  • 28
  • I'm interested in this code, but the plnkr is broken. Could you fix the plnkr so I can learn more about compile and nested transclusion? – Martijn Nov 28 '13 at 07:27
  • @Martijn I think I corrected now. Can you try it and let me know if it is ok? Link here: http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI – marco alves Nov 28 '13 at 11:36
  • Yes it does work now, thanks! What was wrong? I couldn't figure it out. – Martijn Nov 28 '13 at 11:42
  • 1
    @Martijn I made several changes: 1 - updated to recent angular version 2 - used angular-ui-bootstrap tabset directive instead of the one I had 3 - stored the actual html string for title and content instead of the jquery selector result -- the html was being lost on the way -- I think this was the key change – marco alves Nov 28 '13 at 11:56