Plusieurs vues dans une vue parent à l'aide d'un routeur UI angulaire - angularjs, imbriqué, angular-ui-router, state

J'utilise Angularjs UI-Router pour créer une vue avec 3 vues enfants (en-tête, une zone de contenu principale et un pied de page).

J'ai défini l'état de la route pour la vue parent, mais je ne sais pas comment définir l'état pour charger automatiquement les vues enfants dessus.

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

et mon indexView.html ressemble à ceci:

<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>

Je m'attendrais à ce que quelque chose comme ça marche, mais ça ne marche pas:

.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"
}
}
});

J'apprécierais toute aide.

Réponses:

Il y a un Q & A similaire avec un plongeur qui fonctionne:

États imbriqués ou vues pour la mise en page avec leftbar dans ui-router?

Tu es presque là. juste, la première vue (non nommée) sera la cible pour les autres .. nous avons donc utilisé une syntaxe un peu différente

.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"
}

Ce que nous pouvons voir (changements) est

• toutes les vues doivent être définies à l'intérieur de la views : {}, y compris les non nommés. Pourquoi? Parce que s'il y a un objet vues ... modèle inséré est ignoré
• les vues frères sont étendues avec suffixe de noms absolus @index - cela signifie que leur cible ne se trouve pas dans la racine index.html, mais dans l'une des vues déjà chargées de l'état actuel