angularjs - tabset - ¿Cómo usar las pestañas ui.bootstrap angulares con ui.router?

ngbtypeahead

Question

Aquí está mi implementación inicial de las pestañas 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>

Muy simple, y funciona en su mayoría, pero tiene varios problemas.

En primer lugar, no funciona si ingreso una URL en el navegador, por ejemplo, "... / home / tab1". El problema que presumo es que mientras que ui.router puede enrutar a la vista correcta, no sabe seleccionar la pestaña de esa vista.

En segundo lugar, si trato de dejar la página para un estado en una página diferente, desencadena un aparente error en la lógica de las pestañas. A medida que se destruye el conjunto de pestañas, destruye las pestañas una por una. Cuando destruye la pestaña actualmente seleccionada, parece ejecutar la misma lógica que se ejecutaría si solo se destruyera esa pestaña, no toda la configuración de pestañas. Esto hace que seleccione una de las otras pestañas aún no destruidas, lo que hace que ui.router vaya al estado de esa pestaña, lo que me impide abandonar la página. (La solución probablemente sea que la destrucción del conjunto de pestañas no debe seleccionar ninguna pestaña durante el proceso de destrucción).

En tercer lugar, algunas de las vistas de pestañas pueden ser complejas, con muchos hits de servidor durante su construcción. No quiero destruirlos y recrearlos cada vez que cambio de una pestaña a otra. Prefiero tener una vista de pestañas cuando se seleccione esa pestaña por primera vez y luego persistir hasta que salga de la página. La selección de una pestaña vista previamente debería hacerla visible de nuevo, no volver a crearla.

Entonces, parece que necesito algo más complejo y sofisticado, pero ¿qué? Gracias de antemano por cualquier sugerencia.

Actualización: las preguntas frecuentes de ui.router resultan tener una pregunta sobre cómo implementar pestañas. Apunta a un paquete de "extras" que parece prometedor. Es de esperar que haya una forma de integrarse con las pestañas ui.bootstrap. http://christopherthielen.github.io/ui-router-extras/#/sticky

Actualización: aquí hay dos implementaciones que funcionan mucho mejor, pero que todavía no son del todo correctas. El primero usa las pestañas 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>

El segundo se basa en top.html del ejemplo de pestañas adhesivas de 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>

Ambas cosas evitan mis dos primeros problemas anteriores: ir a una pestaña a través de la URL funciona, y puedo dejar la página sin activar las pestañas para destruir el error (presumiblemente porque no estoy usando "select =").

Sin embargo, todavía hay un problema, y ​​sucede con ambas versiones. La plantilla home.users tiene ui-grid, y si primero voy a la página con esa pestaña seleccionada, la grilla está vacía. Veo que el cliente solicita los datos de la cuadrícula del servidor, pero no los muestra. Si voy a la otra pestaña y regreso, muestra los datos (después de recuperarlos). Peor aún, esto significa que no puedo hacer que los usuarios home.tyers se muestren pegajosos, porque luego se queda atascado en el modo que no muestra datos.

Answer 1

La forma más fácil es ignorar todas las directrices de fantasía de bootstrap y simplemente hacer uso del CSS. Entonces puedes terminar con algo muy simple:

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

Esto le dará la apariencia de las pestañas mientras mantiene un estado activo correcto. El problema con el uso de la directiva <tab-header> es que no se puede inicializar limpiamente el estado activo del estado ui-router $state , de modo que se obtienen múltiples pestañas resaltadas en la carga de la página.

Answer 2

Puede considerar echarle un vistazo a este proyecto, ui router ui bootstrap , que se declara como

Paneles de pestañas a prueba de idiotas con soporte de ruta usando Angular.js + Bootstrap 3 + UI Router

No lo he intentado todavía, pero ciertamente parece prometedor.

Answer 3

Solo hice esto en un proyecto mío. Esto supone que sus rutas están conectadas con ui.router. Espero eso ayude.

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