-interfaccia utente del router compilazione templateurl e controller nidificati abstract stati annidati vista
-
20-12-2019 - |
Domanda
Sto sperimentando ui-router
e mi sono imbattuto in un po ' di un capriccio.Io sono in grado di compilare una vista sotto un abstract di stato.Sembra che mentre lo stato è attivo, la vista non è stato trovato
Ecco un esempio :
lo stato del fornitore di :
$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>
search.html :
<div>
<div ui-view='content-container'></div>
</div>
user.list.html :
<div>
<ul>
<li ng-repeat="user in users">
<a ui-sref='search.user.view({userId : user.userId})'></a>
</li>
</ul>
</div>
user.detail.html :
<div>
<div ng-view="left-column"></div>
<div ng-view='right-column'></div>
</div>
user.detail.view.html :
<div> User information </div>
I pagina stato flusso che sto cercando di ottenere è :
1) iniziale di caricamento del sito di ricerca.elenco (bolle fino a
- 1.a:carico
layout.html
in default ui-view in index.html via la '@' vista' - 1.b:
search.html
viene caricata tramite il "full-page" in vista layout.html poi - 1.c:
user.list.html
viene caricata tramite ilcontent-container@search
vista nella ricerca.elenco stato.Questo sta lavorando bene e dandy
2) cliccando su lista creata in user.list.html
carichi di ricerca.utente.quello che deve?bolla di nuovo alla ricerca.utente,
- 2.un carico user.detail.html nel
content-container@search
vista search.html poi (questo funziona) - 2.b carico user.detail.view.html nel
ui-view='left-column'
div di user.detail.html.(questo non funziona", a sinistra della colonna" vista è lasciato vuoto.)
Ho inizialmente pensato che esegue questo codice lo stesso modello astratto di stato di ui-view popolazione due volte (una volta per l'utente.elenco, l'altra per l'utente.dettaglio.vista) tuttavia, sembra che questo non è il caso.Sembra come se il "left-column"
vista è cercato prima il contenuto-contenitore è popolato
Sono nuovo all'interfaccia utente del router così che io possa avere un'idea sbagliata della sequenza di come astratta stati popolare o la destinazione d'uso di astratto stati.
Soluzione
Ci sei quasi - qui è un lavoro plunker.Le modifiche che ho fatto
user.detail.html
non l' ng-vista ma 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>
stato 'di ricerca.utente.vista'
la parte dopo @
delimitatore deve essere il nome di un stato holding che ui-view - che non è ricerca ma search.user
.Come mostra right-column
di seguito - se questo è, infatti, un genitore...si può saltare (sarà fatto per noi dietro le quinte)
.state('search.user.view', {
url : '',
views: {
// 'left-column@search' : {
'left-column@search.user' : {
...
},
'right-column@' : {
...
}
}
Controllare l'esempio funzionante qui