Come utilizzare le schede angolari di ui.bootstrap con ui.router?

Question

Ecco la mia prima realizzazione di schede ui.bootstrap usando ui.router:

<tabset> 
    <tab heading="Tab1" select="$state.go('home.tab1')"> 
    <div ui-view="forTab1"></div> 
    </tab> 
    <tab heading="Tab2" select="$state.go('home.tab2')"> 
    <div ui-view="forTab2"></div> 
    </tab> 
</tabset> 

Bene semplice, e funziona per lo più, ma ha diversi problemi.

Innanzitutto, non funziona se inserisco un URL nel browser, ad es. " .../home/TAB1" . Il problema che presumo è che mentre ui.router potrebbe essere in routing alla vista corretta, non sa selezionare la scheda di quella vista.

In secondo luogo, se si tenta di lasciare la pagina per uno stato su una pagina diversa, si attiva un errore apparente nella logica delle schede. Mentre il set di schede viene distrutto, distrugge le schede una alla volta. Quando distrugge la scheda attualmente selezionata, sembra che esegua la stessa logica che verrebbe eseguita se solo quella scheda fosse distrutta, non l'intero tab set. Questo fa sì che selezioni una delle altre schede non ancora distrutte, il che rende ui.router andare allo stato di quella scheda, il che mi impedisce di lasciare la pagina. (La correzione presumibilmente dovrebbe essere che distruggere il set di schede non dovrebbe selezionare alcuna scheda durante il processo di distruzione.)

In terzo luogo, alcune delle visualizzazioni di scheda possono essere complesse, con molti server colpiti durante la loro costruzione. Non voglio distruggerli e ricrearli ogni volta che passo da una scheda all'altra. Preferirei che fosse creata una vista a schede quando quella scheda viene prima selezionata e quindi persistono finché non esco dalla pagina. La selezione di una scheda visualizzata in precedenza dovrebbe solo renderla nuovamente visibile, non ricrearla.

Quindi, mi sembra di aver bisogno di qualcosa di più complesso e sofisticato, ma cosa? Grazie in anticipo per eventuali suggerimenti.

Aggiornamento: le domande frequenti su ui.router risultano avere una domanda su come implementare le schede. Indica un pacchetto "extra" che sembra promettente. Speriamo che ci sia un modo per integrarsi con le schede di ui.bootstrap. http://christopherthielen.github.io/ui-router-extras/#/sticky

Aggiornamento: ecco due implementazioni che funzionano molto meglio ma non sono ancora corrette. Il primo utilizza schede ui.bootstrap:

<tabset> 
    <tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab> 
    <tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab> 
</tabset> 
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div> 
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div> 

La seconda si basa su top.html dall'esempio appiccicoso-schede di Chris Thielen:

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
    <ul class="nav navbar-nav"> 
    <li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li> 
    <li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li> 
    </ul> 
</div> 
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div> 
<div class="tabcontent well-lg" ui-view="home.users" ng-show="$state.includes('home.users')" class="col-sm-6"></div> 

Entrambi questi evitare miei primi due problemi sopra - in corso a una scheda tramite URL funziona, e posso lasciare la pagina senza far scattare il bug di tabulatori (presumibilmente perché non sto usando "select =").

Tuttavia, c'è ancora un problema, e succede con entrambe le versioni. Il modello home.users ha una griglia utente, e se prima vado alla pagina con quella scheda selezionata, la griglia è vuota. Posso vedere il client che richiede i dati della griglia dal server, ma non lo mostra. Se vado nell'altra scheda e torno, mostra i dati (dopo averlo recuperato). Peggio ancora, questo significa che non riesco a rendere la home.users è appiccicoso, perché poi rimane bloccato nella modalità di non visualizzazione dei dati.

Answer 1

Il modo più semplice è ignorare tutte le fantasiose direttive ui-bootstrap e utilizzare semplicemente il CSS. Poi si può finire con qualcosa di molto semplice:

<ul class="nav nav-tabs"> 
    <li ui-sref=".state1" ui-sref-active="active"><a>State 1</a></li> 
    <li ng-repeat="type in viewModel.types" 
     ui-sref=".typeState({type:type})" 
     ui-sref-active="active"><a>{{type}}</a></li> 
</ul> 

questo darà l'aspetto delle schede, pur mantenendo un corretto stati attivi. Il problema con l'utilizzo della direttiva <tab-header> è che non è possibile inizializzare in modo pulito lo stato attivo dall'interfaccia router $state, in modo da ottenere più schede evidenziate al caricamento della pagina.

Answer 2

si potrebbe considerare avere uno sguardo a questo progetto, ui router plus ui bootstrap tabs, che si dichiara come

a prova di idiota lastre scheda con il supporto di percorso che utilizzano Angular.js + Bootstrap 3 + UI Router

Non l'ho ancora provato, ma sicuramente sembra promettente.

Answer 3

Ho appena fatto questo in un mio progetto. Questo presuppone che i tuoi percorsi siano cablati con ui.router. Spero che sia d'aiuto.

<uib-tabset active="active"> 

    <uib-tab index="0" ui-sref ="tab1" heading="Tab1"></uib-tab> 

    <uib-tab index="1" ui-sref="tab2" heading="Tab2"></uib-tab> 

</uib-tabset>