AngularJS 使用 stateProvider 嵌套状态

Question

我正在尝试使用 stateProvider 实现嵌套状态。使用 url-routing 加载嵌套状态时面临问题。我为其中一个独立状态创建了两个独立状态和 2 个嵌套状态。请检查以下状态配置：

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

必需的行为是先执行父状态，然后是子状态。例如，nestedstate1 必须在 nestedstate2 之前加载。

如果我缺少任何配置，请提出建议。

谢谢

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

扩展

（state2 链）中的每个视图都有自己的控制器

.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

这应该表明，所有状态都是按预期顺序启动的