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 

，这应该表明，所有的国家都在期待的顺序启动