如何在不使用父類中的抽象的情況下實現嵌套狀態（使用命名視圖）

Question

我真的很陌生，我試圖構建一個導航頁面。定義的結構爲： 主頁面上有一個按鈕，可導航到main-page1.html main-page1.html包含具有4個選項卡的菜單欄。 main-page1.js有一個模塊和一個狀態（父狀態）。 所有4個選項卡都在tabs.js文件中，並具有一個模塊和4個狀態（每個狀態都用於不同的狀態）。 Tab1是默認選項卡，並與父網址鏈接

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

Answer 1

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

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