Angular UI路由器沒有更新佈局視圖

我一直堅持了幾個小時。 2列布局加載，但狀態視圖不加載。所有的視圖路徑是正確的，我沒有得到任何錯誤。我搜索了答案，但找不到任何東西。Angular UI路由器沒有更新佈局視圖

angular.module('App', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch', 
    'firebase', 
    'firebase.ref', 
    'firebase.auth', 
    'ui.router' 
    ]) 
    .config(['$stateProvider', 
     function($stateProvider) { 

      $stateProvider 
       .state('root', { 
        url: '', 
        abstract: true, 
        views: { 
         'layout': { 
          templateUrl: 'views/partials/layout/1-column.html' 
         } 
        } 
       }).state('root.home', { 
        url: '/', 
        views: { 
         '[email protected]': { 
          templateUrl: 'views/partials/layout/2-column.html' 
         }, 
         'header': { 
          templateUrl: 'views/partials/layout/sections/header.html' 
         }, 
         'sidebar': { 
          templateUrl: 'views/partials/layout/sections/sidebars/loginSidebar.html' 
         }, 
         'main': { 
          templateUrl: 'views/partials/layout/sections/main.html' 
         }, 
         'footer': { 
          templateUrl: 'views/partials/layout/sections/footer.html' 
         } 
        } 
       }) 
    }])

下面是HTML代碼：

的index.html

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

1- column.html

<div> 
    layout 1 
    <section class="col-md-12"> 
    <div ui-view="header"></div> 
    </section> 



    <section class="main col-md-12"> 
     <div ui-view="main"></div> 
    </section> 

    <section class="col-md-12"> 
    <div ui-view="footer"></div> 
    </section> 
</div>

2- column.html

<div> 
    layout2 
    <section class="col-md-12"> 
    <div ui-view="header"></div> 
    </section> 


    <section class="sidebar col-md-2"> 
     <div ui-view="sidebar"></div> 
    </section> 


    <section ngclass="main col-md-10"> 
     <div ui-view="main"></div> 
    </section> 

    <section class="col-md-12"> 
    <div ui-view="footer"></div> 
    </section> 
</div>

來源

2016-03-02 rastacide

添加您的HTML代碼 –

此外，我希望你有一個默認的$ urlRouterProvider？ –

是的，$ urlRouterProvider是默認值。 – rastacide

你必須相對路徑添加到您的意見.STATE（ 'root.home'）：

'header' -> '[email protected]' 
'sidebar' -> '[email protected]' 
'main' -> '[email protected]' 
'footer' -> '[email protected]'

見文件：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

也請記住，在狀態 '根' 您應用程序沒有關於「footer」和「header」等子視圖的信息。在'root.home'狀態下，但是'root'狀態下的'layout'視圖會被'root.home'狀態下的相同名稱的視圖覆蓋。所以無論如何，用你目前的方法你不會得到2列布局:)

P.S.此外，在你的情況下，你應該做2個視圖的一個狀態 - 第一列和第二列之一。

來源

2016-03-02 06:47:36

鮑里斯你是我的#hero！ – rastacide

Angular UI路由器沒有更新佈局視圖

回答

相關問題