AngularJS嵌套狀態使用stateProvider

Question

我想實現使用stateProvider嵌套狀態。在使用url-routing加載嵌套狀態時面臨問題。我爲獨立國家之一創建了兩個獨立狀態和兩個嵌套狀態。請檢查下面的狀態配置：

.state('state1',{ 
     url : "/page1", 
     templateUrl : "/views/page1.html", 
     contoller : 'page1ctrl' 
}) 
.state('state2', { 
     url : "/page2", 
     templateUrl : "/views/page2.html", 
     controller : 'page2ctrl' 
}) 
state('state2.nestedstate1', { 
     url : "/:nestedstate1", //passing as parameter 
     templateUrl : "/views/temp1.html", 
     controller : 'page2ctrl' 
}) 
.state('state2.nestedstate1.nestedstate2', { 
     url : "/nestedstate2/:param1/:param2", 
     templateUrl : "/views/temp2.html", 
     controller : 'ctrl' 
}) 

問題：如果我嘗試加載整個頁面直接使用完整的URL index.html/page2/nestedstate1/nestedstate2/fname/lname，它將從最後一個子狀態第一次加載數據nestedstate2然後回落到其父狀態「 nestedstate1'並且還將URL更新爲index.html/page2/nestedstate1。

需要的行爲是首先執行父狀態，然後是子狀態。例如，在nestedstate2之前加載nestedstate1是必要的。

請建議我是否缺少任何配置。

謝謝

Answer 1

我創建了working example here。你的情況是1：1。

在上面的腳本中，我發現只有一個錯字：

// missing dot 
state('state2.nestedstate1', { 
// should be 
.state('state2.nestedstate1', { 

的例子，然後工作，同時使用這些調用：

<a ui-sref="state1"> 

    // ui-sref 
    <a ui-sref="state2"> 
    <a ui-sref="state2.nestedstate1({nestedstate1: 'theNestedStateA'})"> 
    <a ui-sref="state2.nestedstate1.nestedstate2({ 
    nestedstate1: 'theNestedStateB', param1: 'value1' ,param2: 'value2'})"> 

    // href 
    <a href="#/page2"> 
    <a href="#/page2/nestedstate0"> 
    <a href="#/page2/nestedstate1/nestedstate2/fname/lname"> 

所有剩下的應該是差不多了。您可以使用本地代碼比較這工作版本，找出什麼是錯的...

檢查它here

擴展

中（狀態2鏈）每個視圖都設置有其自己的控制器

.state('state2', { 
    url : "/page2", 
    templateUrl : "/views/page2.html", 
    controller : 'page2ctrl' 
}) 
.state('state2.nestedstate1', { 
    url : "/:nestedstate1", //passing as parameter 
    templateUrl : "/views/temp1.html", 
    controller : 'page2Nestedctrl' 
}) 
.state('state2.nestedstate1.nestedstate2', { 
    url : "/nestedstate2/:param1/:param2", 
    templateUrl : "/views/temp2.html", 
    controller : 'ctrl' 
}) 

而且他們是這樣的：

.controller('page2ctrl', ['$scope', function ($scope) { 
    console.log('page2ctrl') 
}]) 
.controller('page2Nestedctrl', ['$scope', function ($scope) { 
    console.log('page2Nestedctrl') 
}]) 
.controller('ctrl', ['$scope', function ($scope) { 
    console.log('ctrl') 
}]) 

然後導航到URL時：page2/nestedstate1/nestedstate2/fname/lname，我們可以在控制檯中看到這一點：

page2ctrl 
page2Nestedctrl 
ctrl 

，這應該表明，所有的國家都在期待的順序啓動