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'
})

问题：如果我尝试使用完整网址index.html/page2/nestedstate1/nestedstate2/fname/lname直接加载完整页面，它将首先从上一个子状态 nestedstate2 加载数据，然后回退到其父状态＆＃39 ; nestedstate1 ＆＃39;并将网址更新为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

扩展

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

.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')
}])

然后当导航到网址： page2/nestedstate1/nestedstate2/fname/lname 时，我们可以在控制台中看到这一点：

page2ctrl
page2Nestedctrl
ctrl

这应该表明，所有州都按预期顺序启动

AngularJS使用stateProvider嵌套状态

1 个答案: