角度ui路由器嵌套視圖路由器不工作

Question

爲什麼這條路線不工作？如何強制此代碼工作？如何在angular-ui-router中實現佈局工作？請幫助解決這個問題。

$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

這應該工作

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

父狀態 '佈局' - 現在是TA rgeting 'sidebar@layout' - 使用絕對命名，找到「模板/的layout.html」

子視圖內模板僅僅是用父母目標「主」，所以我們並不需要絕對的命名。如果我們希望，這將是剛剛

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

，因爲我們的目標父級的「佈局」目標ui-view="main"

工作的例子可以在這裏找到（有一些更多的細節）

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

Answer 2

試試用這個：

$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' 
      } 
     } 
    } 
);