ui-router rellenando templateurl y controladores estados abstractos anidados con vistas anidadas

Question

he estado experimentando con ui-router y me encontré con una pequeña peculiaridad.No puedo completar una vista debajo de un estado abstracto.Parece que mientras el estado está activo, no se encuentra la vista.

Aquí hay un ejemplo :

el proveedor estatal:

$stateProvider
.state('search', {
    abstract: true,
    url: '',
    views: {
        '@': { 
            templateUrl: 'app/views/layout.html',
        },
        'full-page@search': {
            templateUrl : 'app/views/search/search.html',
        }
    }
})

//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
    url: '/search/users',
    views: {
        'content-container@search' : {
            templateUrl : 'app/views/search/user.list.html',
            controller  : 'SearchResults',
        }
    }
})

//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
    abstract : true,
    url: '/search/usr/{userId}',
    views: {
        'content-container@search' : {
            templateUrl: 'app/views/user/user.detail.html',
            controller : 'UserController', 
        },
    }
})

//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
    url : '',
    views: {
        'left-column@search' : { 
            templateUrl : 'app/views/user/user.detail.view.html',
            controller  : 'UserEditController',
        }
    }
})`

HTML:

índice.html:

<div> <div ui-view></div> </div>

diseño.html:

<div> <div ui-view='full-page'></div> </div>

buscar.html:

<div> <div ui-view='content-container'></div> </div>

usuario.lista.html:

<div> <ul> <li ng-repeat="user in users"> <a ui-sref='search.user.view({userId : user.userId})'></a> </li> </ul> </div>

usuario.detalle.html:

<div> <div ng-view="left-column"></div> <div ng-view='right-column'></div>
</div>

usuario.detalle.view.html :

<div> User information </div>

El flujo de estado de la página que estoy intentando obtener es:

1) carga inicial del sitio de search.list (que aparece hasta

• 1.a:carga layout.html en la vista de interfaz de usuario predeterminada en índice.html a través de la vista '@'
• 1.b: search.html se carga a través de la vista de "página completa" en layout.html, luego
• 1.c: user.list.html se carga a través del content-container@search ver en el estado search.list.Esto está funcionando muy bien y excelente.

2) haciendo clic en la lista creada en user.list.html carga search.user.view ¿cuál debería?burbuja de regreso a search.user,

• 2.una carga usuario.detalle.html en el content-container@search vista de search.html, entonces (esto funciona)
• 2.b cargar en usuario.detalle.vista.html en el ui-view='left-column' div de usuario.detalle.html.(Esto no funciona, la vista de la "columna izquierda" se deja vacía).

Originalmente pensé que este código realiza el mismo patrón de llenado de vista de interfaz de usuario de estado abstracto dos veces (una para user.list y la otra para user.detail.view), sin embargo, parece que este no es el caso.Parece como si el "left-column" Se busca la vista antes de que se complete el contenedor de contenido.

Soy nuevo en el enrutador ui, por lo que es posible que tenga una idea errónea de la secuencia de cómo se pueblan los estados abstractos o el uso previsto de los estados abstractos.

Answer 1

Ya casi has llegado - aquí tienes un plomero de trabajo.Los cambios que hice

usuario.detalle.html

no la ng-vista pero ui-view

<div> 
   //<div ng-view="left-column"></div> 
   //<div ng-view='right-column'></div>
   <div ui-view="left-column"></div> 
   <div ui-view='right-column'></div>
</div>

estado 'búsqueda.usuario.vista'

la parte despues @ El delimitador debe ser el nombre de un estado sosteniendo esa vista de interfaz de usuario, que no es buscar pero search.user.Como muestro en right-column a continuación: si este es realmente el padre...podemos omitirlo (se hará por nosotros detrás de escena)

.state('search.user.view', {
    url : '',
    views: {
        // 'left-column@search' : { 
        'left-column@search.user' : { 
           ...
        },
        'right-column@' : { 
           ...
        }
    }

Mira el ejemplo de trabajo aquí