Estoy creando una página basada en pestañas que muestra algunos datos. Estoy usando UI-Router en AngularJs para registrar estados.
Mi objetivo es tener una pestaña predeterminada abierta al cargar la página. Cada pestaña tiene subpestañas, y me gustaría tener una subpestaña predeterminada abierta al cambiar de pestaña.
Estaba probando con la función onEnter y adentro estoy usando $state.go('mainstate.substate'); pero parece que no funciona debido a problemas con el efecto de bucle (en state.go to substate llama a su estado principal y así sucesivamente, y se convierte en un bucle).
$stateProvider .state('main', { url: '/main', templateUrl: 'main.html', onEnter: function($state) { $state.go('main.street'); } }) .state('main.street', { url: '/street', templateUrl: 'submenu.html', params: {tabName: 'street'} })Aquí creé una demostración de plunker .
Por ahora todo funciona, excepto que no tengo la pestaña predeterminada abierta y eso es exactamente lo que necesito.
Gracias por sus sugerencias, opiniones e ideas.
Actualización: 1.0 en adelante Admite redirectTo de fábrica.
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto
Creé un ejemplo aquí .
Esta solución proviene de un buen "Comentario" a un problema con la redirección usando .when() ( https://stackoverflow.com/a/27131114/1679310 ) y una solución realmente genial (por Chris T, pero la publicación original fue por yahyaKacem)
https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373
Entonces, en primer lugar, ampliemos main con la configuración de redirección:
$stateProvider .state('main', { url: '/main', templateUrl: 'main.html', redirectTo: 'main.street', })Y agregue solo estas pocas líneas en ejecutar
app.run(['$rootScope', '$state', function($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(evt, to, params) { if (to.redirectTo) { evt.preventDefault(); $state.go(to.redirectTo, params, {location: 'replace'}) } }); }]);De esta forma podemos ajustar cualquiera de nuestros estados con su redirección por defecto... Compruébalo aquí
EDITAR: Opción agregada del comentario de @Alec para preservar el historial del navegador.
De hecho, incluso si esta solución propuesta por Radim hizo exactamente el trabajo, necesitaba recordar la subpestaña (estado) de cada pestaña.
Así que encontré otra solución que hace lo mismo pero también recuerda cada subestado de pestaña.
Todo lo que tenía que hacer era instalar ui-router-extras y usar la función de redirección de estado profundo :
$stateProvider .state('main.street', { url: '/main/street', templateUrl: 'main.html', deepStateRedirect: { default: { state: 'main.street.cloud' } }, });¡Gracias!
A partir de la versión 1.0 del ui-router, admite una propiedad redirectTo . Por ejemplo:
.state('A', { redirectTo: 'AB' })