Comment utiliser les onglets angular ui.bootstrap avec ui.router?

Voici mon initiale de mise en œuvre de l'interface utilisateur.bootstrap onglets à l'aide de l'interface utilisateur.routeur:

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

Bien simple, et surtout fonctionne, mais il a plusieurs problèmes.

Tout d'abord, il ne fonctionne pas si je entrer une URL dans le navigateur, par exemple, ".../home/tab1". La question que je présume est que, bien que l'interface utilisateur.le routeur peut être de routage à la vue correcte, il ne sait pas pour sélectionner l'affichage de l'onglet.

Deuxième, si j'essaie de quitter la page pour un état sur une autre page, il déclenche une apparente bug dans les onglets de la logique. Que l'onglet est en train d'être détruit, il détruit les onglets un par un. Lorsqu'il détruit l'onglet actuellement sélectionné, il apparaît pour exécuter la même logique qu'il irait si seulement cet onglet ont été détruits, et non pas l'ensemble de l'ensemble d'onglets. Ce qui les amènent à sélectionner l'un de l'autre n'est pas encore détruit des onglets, ce qui rend l'interface utilisateur.routeur aller à l'onglet de l'état, qui m'empêche de quitter la page. (Le correctif devrait vraisemblablement être que la destruction de l'onglet ne doit pas sélectionner des onglets au cours du processus de destruction.)

Troisièmement, certains de l'onglet points de vue peuvent être complexes, avec beaucoup de serveur de frappe lors de leur construction. Je ne veux pas le détruire et de le recréer à chaque fois que je passer d'un onglet à l'autre. Je préfère avoir une vue d'onglet sera créé lorsque cet onglet est sélectionné en premier et ensuite persister jusqu'à ce que je quitte la page. La sélection d'un déjà vu onglet doit juste le rendre à nouveau visible, pas de re-créer.

Donc, on dirait que j'ai besoin de quelque chose de plus complexe et sophistiqué, mais quoi? Merci d'avance pour toutes les suggestions.

Mise à jour: l'interface utilisateur.routeur FAQ s'avère avez une question sur la façon de mettre en œuvre des onglets. Il indique un "extras" qui a l'air prometteur. J'espère qu'il y a moyen de l'intégrer à l'interface utilisateur.bootstrap onglets. http://christopherthielen.github.io/ui-router-extras/#/sticky

Mise à jour: voici deux implémentations qui fonctionnent beaucoup mieux, mais n'est pas encore tout à fait droit. La première utilise l'interface utilisateur.bootstrap onglets:

<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 seconde est basée sur top.html de Chris Thielen est collant les languettes exemple:

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

Ces deux éviter de mes deux premiers problèmes ci - dessus va d'un onglet à l'aide de l'URL fonctionne et je peux quitter la page sans déclencher les onglets détruire bug (sans doute parce que je ne suis pas en utilisant "select=").

Cependant, il y a toujours un problème, et il arrive avec les deux versions. La maison.les utilisateurs du modèle dispose d'une interface utilisateur-réseau, et si j'ai d'abord aller à la page avec cet onglet sélectionné, la grille est vide. Je peux voir le client qui demande de la grille de données à partir du serveur, mais il ne le montre pas. Si je vais dans l'onglet autre et revenir, puis il affiche les données (après ré-extraction). Le pire, ce qui signifie que je ne peux pas faire de la maison.les utilisateurs du collant, car alors il se coince dans le pas de données montrant mode.

source d'informationauteur Franz Amador