it-swarm.com.de

In Angular verschachtelte UI-Router-Status-URLs, die Vorlage wird jedoch nicht geladen

Ich verwende ui-router für verschachtelte Zustände und Ansichten. Wenn ich auf den Link klicke, ändert sich die URL in die URL für den Unterzustand, die Vorlage wird jedoch nicht geladen.

Wenn zum Beispiel die URL in den Unterzustand project/settings geändert wird, lädt die entsprechende Vorlage project.settings.html nicht.

Hier ist ein SSCCE mit freundlicher Genehmigung von Plunkr

Unten ist auch mein 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>
45

Ändern Sie zunächst den Dateinamen project.settings.html in templateurl und den Dateinamen in projectSettings.html (Punkt entfernen).

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

Fügen Sie der Projektvorlage zwei Divs hinzu, um die Unterseiten zu laden (Header und Projekteinstellungen).

Hinweis: Inhalte in diesen Divs werden durch die hier geladene Seite ersetzt.

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

Ihr geschachtelter project.settings-Status muss die Ansicht im höheren Status explizit mit dem Suffix '@' ansprechen, dh:

.state('project.settings', {
        url: "/settings",
        views:{
              "[email protected]":{templateUrl: "partials/project.settings.html"},
              "[email protected]":{templateUrl: "partials/header"}
        }
 }) 

Weitere Informationen finden Sie hier https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

23

Ich hatte das gleiche Problem und die Lösung bestand darin, die Ui-Ansicht in die Vorlage Ihrer Eltern aufzunehmen. Denn auch Ihre Partials benötigen einen, wenn sie eine Vorlage aus einem untergeordneten Zustand laden. Siehe hier https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions # Problem-meine-Vorlagen-nicht-erscheinen - Laden - Zeigen

3
Demven Weir

Wenn Sie verschachtelte Ansichten mit einem UI-Router verwenden, fügen Sie der HTML-Seite der übergeordneten Seite ui-view hinzu und fügen Sie bestimmte benannte Ansichten hinzu.

2
Thinkerer

Ich hatte das gleiche Problem, die Lösung war; Öffnen Sie die Datei project.html (die übergeordnete Seite) und wickeln Sie alles in <ui-view> ein.

So ersetzen Sie diese:

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

mit diesen:

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

und du wirst gut sein zu gehen;)

1
Must Ckr

Verwenden Sie ui-sref="project.settings" für einen Link in der project.html-Vorlage.

0
coquin