Dans le routage UIP angulaire, l'URL imbriquée change, mais le modèle ne se charge pas

J'utilise ui-router pour les états et les vues imbriqués. Lorsque je clique sur le lien, l'URL devient l'URL du sous-programme, mais le modèle ne se charge pas.

Par exemple, lorsque l'URL change dans le sous- project/settings , le modèle correspondant project.settings.html ne se charge pas.

Voici une SSCCE avec la permission de Plunkr

Voici aussi mon code:

App.js

 myApp.config(function ($stateProvider, $urlRouterProvider){ $stateProvider .state('project', { url: "/project", views:{ "content":{templateUrl: "partials/project.html"}, "header":{templateUrl: "partials/header"} } }) .state('project.settings', { url: "/settings", views:{ "content":{templateUrl: "partials/project.settings.html"}, "header":{templateUrl: "partials/header"} } }) $urlRouterProvider.otherwise("/") }); /* cheching whether the user is authentic or not*/ myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) { $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){ if($cookieStore.get('user')){ validateCookie.authService(function(result,error){ if(!result){ $location.path("/"); }else{ $state.go('project.settings'); } }); } else{ $location.path("/"); } }); });

Index.html

  <div ng-controller="userController"> <div ui-view="header"></div> <div class="container" ui-view="content"></div> </div>

Project.html

  <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div>

Project.settings.html

  <h1>Project Setting -State test</h1>

Votre projet imbriqué. L'état de la configuration doit aborder la vue à l'état supérieur en utilisant explicitement un suffrage '@', c'est-à-dire:

 .state('project.settings', { url: "/settings", views:{ "content@":{templateUrl: "partials/project.settings.html"}, "header@":{templateUrl: "partials/header"} } })

Voir plus de détails ici https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names—relative-vs-absolute-names

Tout d'abord, modifiez le nom de fichier project.settings.html dans templateurl et nom de fichier pour projectSettings.html (supprimer point).

  .state('project.settings', { url: "/settings", views:{ "content":{templateUrl: "partials/projectSettings.html"}, "header":{templateUrl: "partials/header"} } })

Ajoutez deux divs dans le modèle de projet pour charger les sous-pages (header abd projectSettings)

Remarque: Tout contenu de ces divs sera remplacé par la page chargée ici.

Project.html

  <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> <div ui-view="header">( Project Page header will replace with projectSettings header )</div> <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div> </div>

J'ai eu le même problème et la solution était de placer ui-view sur le modèle de votre parent. Parce que vos partiels ont également besoin d'un aussi, s'ils vont charger un modèle à partir d'un état enfant. Voir ici https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing–loading–showing

Si vous utilisez des vues imbriquées avec UI-router, assurez-vous d'ajouter ui-view dans le html de la page parent et d'inclure des vues nommées spécifiques.

J'ai eu le même problème, la solution était; Ouvrez le fichier project.html (qui est la page parent) et enveloppez tout dans <ui-view>

Donc, remplacez-les:

 <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div>

avec ces:

 <ui-view> <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div> </ui-view>

Et vous serez bien d'y aller;)

Utilisez ui-sref="project.settings" pour ui-sref="project.settings" lien dans le modèle project.html .