2014-04-05 28 views
0

我真的很陌生,我試圖構建一個導航頁面。定義的結構爲: 主頁面上有一個按鈕,可導航到main-page1.html main-page1.html包含具有4個選項卡的菜單欄。 main-page1.js有一個模塊和一個狀態(父狀態)。 所有4個選項卡都在tabs.js文件中,並具有一個模塊和4個狀態(每個狀態都用於不同的狀態)。 Tab1是默認選項卡,並與父網址鏈接如何在不使用父類中的抽象的情況下實現嵌套狀態(使用命名視圖)

問題:我不假設在父狀態中使用abstract:true。因爲當我到達main-page.html Tab1的內容不呈現。 然而,只有當我點擊標籤一次或兩次呈現。 這個作品找到抽象:真正的,但不幸的是我不能在某些原因使用父狀態的抽象。有沒有解決方法?

回答

0

把你的父母狀態摘要:真:

.state('parentState', { 
    url: '/yoururl/:yourparam', 
    abstract: true, 
    views: { 
    '@': { templateUrl: 'views/main-page1.html', controller: 'YourCtrl' } 
    } 
}) 

你的孩子的狀態(TAB1,TAB2,TAB3,TAB4),把網址: '' 您TAB1,因爲這應該是默認的:

.state('parentState.tab1', { 
    url: '', 
    views: { 
    'tabContent' : { templateUrl: 'views/tab1.html' } 
    } 
}) 
.state('parentState.tab2', { 
    views: { 
    'tabContent' : { templateUrl: 'views/tab2.html' } 
    } 
}) 
.state('parentState.tab3', { 
    views: { 
    'tabContent' : { templateUrl: 'views/tab3.html' } 
    } 
}) 
.state('parentState.tab4', { 
    views: { 
    'tabContent' : { templateUrl: 'views/tab4.html' } 
    } 
}) 

在您的主page1.html文件,創建一個名爲tabContent命名視圖:

<div ui-view="tabContent"></div> 
相關問題