Angular Ui-Router geschachtelte Ansicht Router funktionieren nicht

Question

Warum funktioniert diese Routen nicht? Wie erzwinge ich, dass dieser Code funktioniert? Wie implementiert man Layouts in eckigen ui-routern? Bitte helfen Sie dieses Problem zu lösen.

$stateProvider 
    .state('layout', { 
     abstract: true, 
     url: '', 
     views: { 
      'layout': { templateUrl: 'template/layout.html' }, 
      'header': { 
       templateUrl: 'template/header.html', 
       controller: 'HeaderController' 
      }, 
      'sidebar': { templateUrl: 'template/sidebar.template.html' } 
     } 
    }) 
    .state('layout.home', { 
     url: '/', 
     views: { 
      'main@layout.home': { templateUrl: 'template/main.html' } 
     } 
    } 
); 

layout.html

<main class="layout"> 
    <div ui-view="header"></div> 
    <div class="main"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-9"> 
        <div class="content"> 
         <div ui-view="main"></div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div ui-view="sidebar"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</main> 

index.html

<div ui-view="layout"></div> 

Answer 1

Dies sollte funktionieren

.state('layout', { 
    abstract: true, 
    url: '', 
    views: { 
     'layout': { templateUrl: 'template/layout.html' }, 
     'header': { 
      templateUrl: 'template/header.html', 
      controller: 'HeaderController' 
     }, 
     //'sidebar': { templateUrl: 'template/sidebar.template.html' } 
     'sidebar@layout': { templateUrl: 'template/sidebar.template.html' } 
    } 
}) 
.state('layout.home', { 
    url: '/', 
    views: { 
     //'main@layout.home': { templateUrl: 'template/main.html' } 
     'main': { templateUrl: 'template/main.html' } 
    } 
} 

Die Mutter Zustand 'Layout' - jetzt ist ta rgeting 'sidebar@layout' - mit absoluter Namensgebung, eine Vorlage innerhalb der ‚template/layout.html‘ einfach

Das Kind Blick zu finden, mit den Eltern-Haupt-Ziel so brauchen wir keine absolute Namensgebung. Und wenn wir wollen, wäre es nur

'main@layout': { templateUrl: 'template/main.html' } 

weil wir Eltern Ziel 'Layout' Ziel ui-view="main"

Beispiel Arbeiten hier gefunden werden (mit einigen mehr Details)

• Nested states or views for layout with leftbar in ui-router?

Answer 2

Versuchen mit diesem:

$stateProvider 
    .state('layout', { 
     abstract: true, 
     url: '', 
     views: { 
      'layout': { 
       templateUrl: 'template/layout.html' 
      } 
     } 
    }) 
    .state('layout.home', { 
     url: '/', 
     views: { 
      'main': { 
       templateUrl: 'template/main.html' 
      }, 
      'header': { 
       templateUrl: 'template/header.html', 
       controller: 'HeaderController' 
      }, 
      'sidebar': { 
       templateUrl: 'template/sidebar.template.html' 
      } 
     } 
    } 
);