Visualizzazioni multiple in una vista genitore usando Angular UI-Router - angularjs, nested, angular-ui-router, state

Sto usando Angularjs UI-Router per creare una vista con 3 viste figlio (intestazione, un'area del contenuto principale e un piè di pagina).

Ho definito lo stato del percorso per la vista genitore ma non so come posso definire lo stato per caricare automaticamente le viste secondarie su di esso.

 $stateProvider
.state("index",
{
url: "/index",
templateUrl: "AngularJS/Templates/indexView.html",
controller: "indexController"
});

e il mio indexView.html si presenta così:

<div class="row">
<div class="col-md-6 col-md-offset-3">
<a ui-sref="index.detail">Here</a>
<div data-ng-controller="indexController as vm">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

</div>
</div>

Mi aspetterei che qualcosa come questo funzioni, ma non lo fa:

.state("index",
{
url: "/index",
templateUrl: "AngularJS/Templates/indexView.html",
controller: "indexController"
views: {
"header": {
templateUrl: "/AngularJS/Templates/headerView.html",
controller: "HeaderController"
},
"content": {
templateUrl: "/AngularJS/Templates/contentView.html",
controller: "ContentController"
},
"footer": {
templateUrl: "/AngularJS/Templates/footerView.html",
controller: "FooterController"
}
}
});

Gradirei qualsiasi aiuto.

risposte:

C'è un Q & A simile con un plunker funzionante:

Stati nidificati o viste per il layout con barra sinistra in ui-router?

Ci sei quasi. semplicemente, la prima vista (senza nome) sarà il bersaglio per gli altri .. quindi abbiamo usato una sintassi un po 'diversa

.state("index",
{
url: "/index",
//templateUrl: "AngularJS/Templates/indexView.html",
//controller: "indexController"
views: {
"": {
templateUrl: "AngularJS/Templates/indexView.html",
controller: "indexController"
},
"header@index": {
templateUrl: "/AngularJS/Templates/headerView.html",
controller: "HeaderController"
},
"content@index": {
templateUrl: "/AngularJS/Templates/contentView.html",
controller: "ContentController"
},
"footer@index": {
templateUrl: "/AngularJS/Templates/footerView.html",
controller: "FooterController"
}

Quello che possiamo vedere (cambiamenti) è

• tutte le viste devono essere definite all'interno del views : {}, incluso l'innominato. Perché? Perché se c'è una vista dell'oggetto ... il modello in linea viene saltato
• le viste di pari livello sono estese con suffisso di nomi assoluti @index - questo dice che il loro target non è nella root index.html, ma all'interno di una delle viste già caricate dello stato corrente