ui-router preenchendo templateurl e controladores de estados abstratos aninhados com visualizações aninhadas
-
20-12-2019 - |
Pergunta
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 docontent-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.
Solução
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