Angular UI路由器 - 分享狀態之間的視圖

我想創建一個web應用程序，我有一個index.html頁面有三個視圖：頁眉，內容和頁腳。Angular UI路由器 - 分享狀態之間的視圖

我希望頁面和頁腳在頁面之間保持一致，但同時不要成爲index.html文件的一部分。

我還想根據我去過的網址來改變內容視圖。

這是我目前的解決方案

的index.html

<body> 
    <header ui-view="header"></header> 
    <main ui-view="content"></main> 
    <footer ui-view="footer"></footer> 
</body>

app.js

$stateProvider 
    .state('my-app', { 
     abstract: true, 
     views: { 
      'header': { 
       templateUrl: 'partials/shared/header.html', 
       controller: "UserController" 
      }, 
      'footer': { 
       templateUrl: 'partials/shared/footer.html' 
      } 
     } 
    }) 
    .state('my-app.home', { 
     url: "/", 
     views: { 
      'content': { 
       templateUrl: 'partials/home.html', 
       controller: 'HomeController' 
      } 
     } 
    })

當我加載的頁面「/」它顯示的標題和頁腳已正確加載，我可以在頁面上看到它們，但主要內容已丟失。

誰能告訴我我做錯了什麼？

感謝

來源

2014-11-04 Tom Halley

我設法弄明白。

我不得不在我的子狀態下顯式指向根狀態中的視圖。

要做到這一點，我不得不指向'content @'。

固定碼：

app.js

$stateProvider 
    .state('my-app', { 
     abstract: true, 
     views: { 
      'header': { 
       templateUrl: 'partials/shared/header.html', 
       controller: "UserController" 
      }, 
      'footer': { 
       templateUrl: 'partials/shared/footer.html' 
      } 
     } 
    }) 
    .state('my-app.home', { 
     url: "/", 
     views: { 
      '[email protected]': { 
       templateUrl: 'partials/home.html', 
       controller: 'HomeController' 
      } 
     } 
    })

來源

2014-11-04 12:10:53

你需要父母爲我-app.home：

.state('my-app.home', { 
    parent: 'my-app', 
    url: "/", 
    views: { 
     'content': { 
      templateUrl: 'partials/home.html', 
      controller: 'HomeController' 
     } 
    } 
}

來源

2014-11-04 11:59:28 Troopers

不太。當我加載my-app.home狀態時，頁眉和頁腳加載正常，它只是顯示'content'視圖。我可以在控制檯中看到它正在加載文件，但實際上並未將其注入到index.html中。 – 2014-11-04 12:04:59

你很可靠。我不會在代碼中顯示錯誤。也許，嘗試用div替換main – Troopers 2014-11-04 12:10:54

試試這個：

$stateProvider 
    .state('my-app', { 
     abstract: true, 
     views: { 
      'header': { 
       templateUrl: 'partials/shared/header.html', 
       controller: "UserController" 
      }, 
      'content': {     
       template: '<ui-view/>', 
      }, 
      'footer': { 
       templateUrl: 'partials/shared/footer.html' 
      } 
     } 
    }) 
    .state('my-app.home', { 
     url: "/", 
     templateUrl: 'partials/home.html', 
     controller: 'HomeController' 
    })

來源

2014-11-04 12:32:27

Angular UI路由器 - 分享狀態之間的視圖

回答

相關問題