Zagnieżdżone karty za pomocą angularjs

Question

Potrzebujesz utworzyć zagnieżdżone zakładki.

Na stronie pojawi się wiele kart identyfikatora Person jako zewnętrzne zakładki, a po kliknięciu każdej zakładki zostaną otwarte wewnętrzne karty, takie jak Strona główna, Biuro itp., A po kliknięciu wewnętrznej karty - Strona główna zostanie wyświetlona zawartość karty.

Outertab: Osoba 1 PERSON2

Innertab: Home Office

Odnosząc strony - http://angular-ui.github.io/bootstrap/ stworzonego wypustki zewnętrzne z treści. utworzył 2 osobne tabset, ale nie mógł podać łącza między dwoma zestawami.

Czy ktoś może mi pomóc, jak napisać dyrektywę dla zagnieżdżonych kart? Jakieś linki referencyjne?

Answer 1

Uważam, że AngularUI Router jest tym, czego szukasz. Większość mocy routera UI jest w stanie zagnieżdżać widoki stanów &. Skorzystaj z podanego linku i zapoznaj się z sekcją Nested States & Views.

Ten Plunker example zawiera AngularUI Router, aby osiągnąć podobną funkcjonalność, której szukasz.

[EDIT]

Układ ten składa się z zagnieżdżonych poglądów jest dokładnie to, co dla AngularUI Router służy do:

Więc TabsTemplate dynamicznie renderować pierwszy poziom zakładkach (dowolny numer).

TabTemplate może być szablonem bez dynamicznej zawartości, ponieważ karty Dom i Biuro są zawsze dostępne.

OfficeTemplate i HomeTemplate są ponownie szablonami, które są wypełniane dynamicznie w zależności od wyboru bieżącej osoby.

Answer 2

Możesz odwołać się do tego, jak napisano angular bootstrap tabset directive.

Przeczytanie kodu karty pomogło mi zrozumieć, jak działa dyrektywa. Teraz mogę zbudować wiele komponentów od podstaw.

Buduję sobie prostszą wersję dyrektywy zestawu kart, nie renderuje ona zawartości, tylko element nagłówka tabulacji. Tak więc mogę zdecydować, co w treści, za pośrednictwem karty wybranej zwrotnej. A dla zagnieżdżonych kart, po prostu muszę wprowadzić kolejną dyrektywę zestawu kart.