web-dev-qa-db-fra.com

Dans l'url de l'état imbriqué du routeur ui angulaire change, mais le modèle ne se charge pas

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

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

Voici une courtoisie SSCCE de Plunkr

Ci-dessous, mon code également: 

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>
javascriptangularjsangular-ui-router
45
Sajin M Aboobakkar

Commencez par changer le nom du fichier project.settings.html dans le modèle et le nom du fichier en projectSettings.html (supprimer le point).

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

Ajouter deux divs dans le modèle de projet pour charger les sous-pages (en-tête abd projectSettings)

Remarque: Tout contenu de ce div 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>
20
Sajin M Aboobakkar

Votre état project.settings imbriqué doit adresser explicitement la vue dans l'état supérieur à l'aide d'un suffixe "@", c'est-à-dire:

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

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

23
Vladyslav Babenko

Si vous utilisez des vues imbriquées avec UI-router, veillez à ajouter ui-view au code HTML de la page parent et à inclure des vues nommées spécifiques.

2
Thinkerer

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

Alors, remplacez ceux-ci:

<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 irez bien;)

1
Must Ckr

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

0
coquin