Come posso separare le intestazioni delle schede dai loro corpi con angularjs?

Question

In un progetto angularjs, sto usando la direttiva uib-tabset per visualizzare le schede. Vorrei visualizzare un pannello sinistro comune a tutte le schede. Quindi devo aggiungere un div prima o dopo la direttiva uib-tabset.

Per impostazione predefinita, la parte dei titoli si trova direttamente sopra il corpo delle schede.

Nella struttura generata, desidero includere il pannello interno le linguette (visivamente):

Con UIB-tabsets, la struttura generata è così:

<panel> 
<tabs-headings> 
<tabs-bodies> 

Con questa struttura, l'unico modo che ho trovato è quello di modificare il css e giocare con le proprietà di posizione (sinistra/in alto) al fine di spostare le intestazioni in cima al pannello laterale, ma trovo questo rischioso. Un altro modo sarebbe quello di duplicare il codice del pannello all'interno di ciascuna scheda, ma anch'io lo trovo male.

Invece vorrei generare questo modo sarebbe più facile per creare il css:

<tabs-heading> 
<panel> 
<tabs-bodies> 

C'è un modo semplice per raggiungere tale comportamento?

Grazie

Answer 1

Modifica: Lol. Ho appena visto che sono in ritardo di 10 mesi.

Mi sono imbattuto in quello di cui stai parlando. Se si esegue il rendering dinamico del contenuto in ogni scheda utilizzando ng-repeat, ciò eviterebbe di dover rifare il pannello laterale un paio di volte.

<div class="tabWrapper"> 
    <uib-tabset> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> 

     <div class="sidePanel">{{tab.sidepanel}}</div> 
     <div class="tabContent">{{tab.content}}</div> 

    </uib-tab> 
    </uib-tabset> 
    </div> 

Non avrebbe bisogno di pasticciare con posizionamento assoluto uno:

.sidePanel { 
    float: left; 
    width: 20%; 
    height: 10em; 
    border: 1px solid black; 
    border-top: none; 
} 

O, se si sta utilizzando angular-ui-router, si potrebbe realizzare il pannello laterale statica utilizzando stati astratti.

config.js

$stateProvider 
    .state('root.tabs', { 
     abstract: true, 
     controller: 'TabsCtrl as vm', 
     templateUrl: 'templates/app-layout/tabs.tpl.html' 
    }) 
    .state('root.tabs.view', { 
     url: '/tabsview', 
     templateUrl: 'templates/app-layout/sidepanel.tpl.html' 
    }); 

tabs.tpl.html

<div> 
     <uib-tabset> 
     <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> 

     <div class="sidePanelContainer" ui-view></div> 

     <div class="tabContent">{{tab.content}}</div> 
     </uib-tab> 
     </uib-tabset> 
    </div> 

sidepanel.tpl.html

<div class="sidePanel"> 
    <input type="text" value="1234"> 
    <input type="text" value="4321"> 
</div> 

Vedi anche: what is the purpose of use abstract state?

Spero che questo aiuti