Angular-Ui-Router, vistas anidadas con nombre, ¿qué estoy haciendo mal?
Estoy tratando de implementar un ejemplo muy simple usando vistas anidadas con nombres usando ui-router, y no puedo hacer que funcione. Si alguien pudiera ver este jsFiddle -http://jsfiddle.net/thardy/eD3MU/ - y dime qué estoy haciendo mal, te lo agradecería mucho.
La idea básica es esta: - Mi index.html tiene una sola vista de interfaz de usuario - La plantilla que se conecta tiene dos, llamadas vistas de interfaz de usuario - Estoy tratando de configurar la configuración para completar estas dos vistas de interfaz de usuario con plantillas y no puedo hacerlo funcionar
Este es el núcleo del violín (los corchetes angulares en la plantilla reemplazados con []):
$stateProvider
.state('test', {
url: '/test',
views: {
'main': {
template: '[h1]Hello!!![/h1]' +
'[div ui-view="view1"][/div]' +
'[div ui-view="view2"][/div]'
}
}
})
.state('test.subs', {
url: '',
views: {
'view1': {
template: "Im View1"
},
'view2': {
template: "Im View2"
}
}
});
Lo he ajustado un montón durante varias horas (probando nombres absolutos, etc.), y estoy a punto de enloquecer. Se ve bien de acuerdo con la documentación (al menos para mí), pero no hay ejemplos simples, y debo estar perdiendo algo obvio.
Actualizar Al eliminar la url del estado de prueba y agregar url: '' al estado test.subs, funciona. Pero agregar cualquier url al estado de prueba hace que falle nuevamente. En el escenario de mi mundo real, ninguno de estos estados está en la raíz, y no tener ninguna URL en absoluto en el estado principal hace que las cosas no funcionen bien. Es como si ese estado no estuviera activado o algo así. Según los documentos, tener url: '' en el subcomité debería hacer que se active junto con su estado principal, pero eso no es lo que está sucediendo.
Actualización - Solución Para cualquiera que quiera verlo ...http://jsfiddle.net/thardy/eD3MU/