Angular UI中的嵌套狀態和視圖路線

Question

對不起，如果以前有類似的問題，但我一直在努力讓某個設置工作一段時間。我從一個現存的問題中汲取了一名工作中的潛伏者，並試圖根據我的需要調整它。

原單Plunker：http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW

我（略）編輯叉：http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi

我想實現是一個包含頁面內容的頁眉，頁腳和未命名視圖基地佈局。我可以用原始的蹦跳者做到這一點。但是，當我試圖讓更多的看中，並有一個結構更是這樣的：

$urlRouterProvider.otherwise('/home/list'); 

$stateProvider 
    .state('root', { 
     abstract: true, 
     views: { 
     '@': { 
      controller: 'RootCtrl', 
      controllerAs: 'rootCtrl' 
     }, 
     'header@': { 
      templateUrl: 'header.html', 
      controller: 'HeaderCtrl', 
      controllerAs: 'headerCtrl' 
     }, 
     'footer@': { 
      templateUrl: 'footer.html', 
      controller: 'FooterCtrl', 
      controllerAs: 'footerCtrl' 
     } 
     } 
    }) 

這裏是調整狀態定義：

.state('root.home', { 
    parent: 'root', 
    url: '/home', 
    views: { 
    '@': { 
     template: '<ui-view></ui-view>', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    }, 
    'list@root.home': { 
     url: '/list', 
     template: 'homeList.html', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
}); 

我想在這裏做的是讓這個'root.home'狀態只是一個基本狀態，用於預先設置URL'home'或任何URL在我的真實應用程序中。我已經嘗試通過ui-route示例應用程序準備好了，但要花很多時間並且正在進行循環。我敢肯定這很簡單...

Answer 1

有一個working updated plunker。有一個狀態定義調整。

這是原來的代碼：

.state('root.home', { 
    parent: 'root', 
    url: '/home', 
    views: { 
    '@': { 
     template: '<ui-view></ui-view>', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    }, 
    'list@root.home': { 
     url: '/list', 
     template: 'homeList.html', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
}); 

有什麼問題呢？首先是一張紙條 - 我們不需要定義parent: 'root'，因爲我們的父母是我們的名字'root.home'。所以，爲了更清楚一點，我決定保持父母的設置，同時將州名改爲「家」。其次，我們有兩種觀點在爲我們的國家發揮作用，但第二種觀點被命令注入第一種觀點。

// this line is instructing UI-Router: inject this into 
// the other view definition of the current state 
// search for ui-view="list" 
'list@root.home' 

但是沒有定義ui-view="list"。

最後，我們無法爲視圖聲明url。 URL屬於剛指出：

// this is wrong. The view cannot have url 
// url is for state 
'list@root.home': { 
     url: '/list', 

所以，我們應該介紹一下我們國家的孩子......「home.list」

這是調整後的狀態（S）定義（從新working plunker ）：

.state('home', { 
    parent: 'root', 
    url: '/home', 
    views: { 
    '@': { 
     template: '<div ui-view="list"></div>', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
}) 
.state('home.list', { 
    url: '/list', 
    views: { 
    'list': { 
     templateUrl: 'homeList.html', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
});