2013-05-03 70 views
10

爲什麼爲了讓子視圖(嵌套視圖)呈現父視圖必須是抽象的?ui-router爲什麼父母狀態必須是抽象的

$stateProvider 
      .state('A', {url: '/A', abstract: true, templateUrl: 'views/A.html'}) 
      .state('A.B', {url: '', abstract: true, templateUrl: 'views/B.html'}) 
      .state('A.B.C', {url:'', abstract:false, templateUrl:'views/C.html'}); 

父視圖「A」在home.html的託管如下:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Yomingo</title> 
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"/> 
    <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/> 
</head> 
<body> 
    <div ui-view> 
    </div> 
<script type="text/javascript" data-main="scripts/main" src="lib/require/require.js"></script> 
</body> 
</html> 

如果任何父狀態「A」或「B」的被標記爲抽象=假UI -view內容不呈現。

+1

讓我們假設你的應用程序頁面是home.html,並且父視圖A的模板確實在views/A.html ...你應該共享views/A.html和views/B.html,這樣我們可以看到孩子的意見正在被放入父母的觀點。 – laurelnaiad 2013-05-31 17:39:53

回答

6

我一直有類似的麻煩。

你的三種狀態都使用相同的URL,/ A:

  • 一個: '/ A'
  • AB: '/ A' + ''
  • ABC:'/ A'+''+''

由於他們有URL定義,當前狀態將根據喲你目前的網址。你一次只能處於一種狀態,所以大概所選擇的狀態是首先定義的狀態。

如果你使A和A.B狀態抽象,那麼它們不能被轉換進去,所以當你瀏覽到/ A時不會被考慮。因此A.B.C被選中,繼承A.B和A.

如果您希望一次顯示更多您的觀點,那麼我建議您閱讀multiple named views的文檔以便於追蹤。

相關問題