webentwicklung-frage-antwort-db.com.de

Wie benutzt man Angular ui.bootstrap-Registerkarten mit ui.router?

Hier meine erste Implementierung von ui.bootstrap-Registerkarten mithilfe von 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>

Schön einfach, und es funktioniert meistens, aber es hat einige Probleme.

Erstens funktioniert es nicht, wenn ich eine URL in den Browser eingebe, z. ".../home/tab1". Ich nehme an, dass das Problem ist, dass ui.router zwar zur richtigen Ansicht weiterleitet, die Registerkarte dieser Ansicht jedoch nicht kennt.

Zweitens, wenn ich versuche, die Seite für einen Status auf einer anderen Seite zu belassen, wird ein offensichtlicher Fehler in der Tabulatorlogik ausgelöst. Wenn der Tab-Satz zerstört wird, werden die Tabs nacheinander zerstört. Wenn die aktuell ausgewählte Registerkarte zerstört wird, scheint sie dieselbe Logik auszuführen, die ausgeführt würde, wenn nur diese Registerkarte zerstört würde, nicht die gesamte Registerkarte. Dadurch wird eine der anderen Registerkarten ausgewählt, die noch nicht zerstört wurden. Dadurch wechselt der ui.router in den Status dieser Registerkarte, sodass ich die Seite nicht mehr verlassen kann. (Der Fix sollte vermutlich darin bestehen, dass beim Zerstören des Registersets während des Zerstörungsvorgangs keine Registerkarten ausgewählt werden.)

Drittens können einige der Registerkartenansichten komplex sein, mit vielen Servertreffern während ihrer Erstellung. Ich möchte sie nicht jedes Mal zerstören und neu erstellen, wenn ich von einem Tab zum anderen wechsle. Ich würde lieber eine Tabulatoransicht erstellen, wenn diese Registerkarte zuerst ausgewählt wird, und dann persistieren, bis ich die Seite verlasse. Wenn Sie eine zuvor angezeigte Registerkarte auswählen, wird sie nur wieder sichtbar, nicht aber neu erstellt.

Anscheinend brauche ich etwas komplexeres und raffinierteres, aber was? Vielen Dank im Voraus für alle Vorschläge.

Update: Der ui.router FAQ zeigt eine Frage zum Implementieren von Registerkarten. Es verweist auf ein "Extras" -Paket, das vielversprechend aussieht. Hoffentlich gibt es eine Möglichkeit, mit ui.bootstrap-Registerkarten zu integrieren. http://christopherthielen.github.io/ui-router-extras/#/sticky

Update: Hier sind zwei Implementierungen, die viel besser funktionieren, aber immer noch nicht ganz richtig sind. Die erste verwendet ui.bootstrap-Registerkarten:

<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>

Die zweite basiert auf top.html aus dem Beispiel von 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>

Beide vermeiden meine ersten beiden Probleme - ein Tab per URL zu laufen klappt, und ich kann die Seite verlassen, ohne dass der Tab zerstört wird (wahrscheinlich, weil ich nicht "select =" verwende). 

Es gibt jedoch immer noch ein Problem, und zwar bei beiden Versionen. Die home.users-Vorlage hat ein Ui-Grid. Wenn ich zum ersten Mal auf die Seite gehe, auf der diese Registerkarte ausgewählt ist, ist das Grid leer. Ich kann sehen, dass der Client die Daten des Grids vom Server anfordert, aber es wird nicht angezeigt. Wenn ich zum anderen Reiter gehe und zurückkomme, werden die Daten angezeigt (nach dem erneuten Abrufen). Schlimmer noch, das bedeutet, dass ich die Benutzer von home.users nicht klebrig machen kann, weil sie dann im No-Data-Showing-Modus hängen bleiben.

13
Franz Amador

Der einfachste Weg ist, alle ausgefallenen ui-bootstrap-Anweisungen zu ignorieren und einfach das CSS zu verwenden. Dann können Sie etwas ganz einfaches bekommen:

<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>

Dadurch wird das Aussehen der Registerkarten angezeigt, während ein korrekter aktiver Status beibehalten wird. Das Problem bei der Verwendung der <tab-header>-Direktive besteht darin, dass Sie den aktiven Status des Ui-Routers $state nicht sauber initialisieren können, sodass beim Laden der Seite mehrere Registerkarten hervorgehoben werden.

24
srlm

Sie könnten einen Blick auf dieses Projekt werfen: ui router plus ui bootstrap tabs , das sich selbst als deklariert 

Idiotensichere Registerkarten mit Routenunterstützung mithilfe von Angular.js + Bootstrap 3 + UI Router

Ich habe es noch nicht ausprobiert, sieht aber sicherlich vielversprechend aus.

5
ElliotPsyIT

Das habe ich einfach in einem Projekt von mir gemacht. Dies setzt voraus, dass Ihre Routen mit ui.router verbunden sind. Ich hoffe es hilft.

<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>

1
dlsdaviddls