Nested tabs using angle characters

Question

You must create sub tabs.

There will be several tabs of the user ID on the page as external tabs, and when you click each tab, internal tabs such as "Home", "Office", etc. will open, and when you click on the internal tab "Home" the contents of the tab will be displayed.

Outertab: Person 1 Person2

Innertab: Home Office

Referring to the site - http://angular-ui.imtqy.com/bootstrap/ , external tabs with content are created. created 2 separate tabs, but could not give a link between the two boards.

Can someone help me write a directive for nested tabs? Any links links?

Answer 1

I believe AngularUI Router is what you are looking for. Most UI-Router capabilities have the ability to set states and views. Follow the link I provided and look at the Nested States & Views section.

This Plunker example includes an AngularUI Router to achieve the similar functionality you are looking for.

[EDIT]

This layout, consisting of nested views, is what is used for AngularUI Router to:

So, TabsTemplate will dynamically display the first level of tabs (any number).

TabTemplate can be a template without any dynamic content, since there are always Home and Office tabs.

OfficeTemplate and HomeTemplate are again templates that are dynamically populated based on the choice of the current person.

Answer 2

You can refer to the angular tabstrap tabset directive .

Reading the tab code helped me understand how the directive works. Now I can assemble many components from scratch.

I am creating a simpler version of the tabset directive, it does not display the contents, but only the tab header element. Therefore, I can decide what is inside the content through the selected feedback. And for nested tabs, I just need to introduce another tabset directive.