0

我正在尝试使用 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 之前加载。

请建议我是否缺少任何配置。

谢谢

4

1 回答 1

0

我在这里创建了工作示例。它与您的方案是 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">

其余的应该几乎相同。您可以将此工作版本与您的本地代码进行比较，以找出问题所在...

在这里检查

延长

（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

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

于 2015-02-24T12:48:04.790 回答