ui-router preenchendo templateurl e controladores de estados abstratos aninhados com visualizações aninhadas

Question

Eu tenho experimentado ui-router e me deparei com uma peculiaridade.Não consigo preencher uma visualização sob um estado abstrato.Parece que enquanto o estado está ativo, a visualização não foi encontrada

Aqui está um exemplo :

o provedor 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:

index.html:

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

layout.html:

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

pesquisa.html:

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

usuário.list.html:

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

usuário.detail.html :

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

usuário.detail.view.html :

<div> User information </div>

O fluxo de estado da página que estou tentando obter é:

1) carregamento inicial do site search.list (que borbulha até

• 1.a:carregar layout.html na visualização da interface do usuário padrão em index.html através da visualização '@''
• 1.b: search.html é carregado através da visualização de "página inteira" em layout.html, então
• 1.c: user.list.html é carregado através do content-container@search visualizar no estado search.list.Isso está funcionando bem e elegante

2) clicando na lista criada em user.list.html carrega search.user.view qual deveria?volte para search.user,

• 2. uma carga usuário.detalhe.html no content-container@search visualização de search.html, então (isso funciona)
• 2.b carregar usuário.detalhe.view.html no ui-view='left-column' div de usuário.detail.html.(isso não funciona, a visualização da "coluna esquerda" fica vazia.)

Originalmente, pensei que esse código executava o mesmo padrão de população de visualização de interface do estado abstrato duas vezes (uma para user.list e outra para user.detail.view), no entanto, parece que esse não é o caso.Parece que o "left-column" view é pesquisada antes que o contêiner de conteúdo seja preenchido

Sou novo no roteador ui, então posso ter uma ideia errada da sequência de como os estados abstratos são preenchidos ou do uso pretendido de estados abstratos.

Answer 1

Você está quase lá - aqui está um êmbolo de trabalho.As mudanças que fiz

usuário.detalhe.html

não o ng-view mas 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 'search.user.view'

a parte depois @ delimitador deve ser o nome de um estado mantendo aquela visualização da interface do usuário - o que não é procurar mas search.user.Como eu mostro right-column abaixo - se este for de fato o pai ...podemos pular isso (será feito para nós nos bastidores)

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

Verifique o exemplo de trabalho aqui