AngularUI嵌套路由问题

Question

$stateProvider
  .state('dashboard', {
    url:'/dashboard',
    controller: 'MainCtrl',
    templateUrl: 'views/dashboard/main.html'
  })
  .state('dashboard.exchange',{
    templateUrl:'views/dashboard/exchange.html',
    controller: 'ExchangeCtrl',
    url:'/exchange/{exchangeId:[0-9]}',
  })
  .state('dashboard.exchange.module',{
    templateUrl:'views/dashboard/exchangeModule.html',
    controller: 'ExchangeModuleCtrl',
    url:'/module/{exchangeModuleHostName}',
  })

• '/dashboard' 正确地路由到 MainCtrl
• '/dashboard/exchange/1' 正确路由到 ExchangeCtrl
• '/dashboard/exchange/1/module/ae38596496d3' 错误地路由到 ExchangeCtrl

为什么第三个 url 不路由到 ExchangeModuleCtrl？我该如何解决这个问题？

Answer 1

如果我们希望最后一个子状态：'dashboard.exchange.module' 完全替换其父 'dashboard.exchange' 的内容，我们必须选择：

第一个选项，整个父母都是一个目标

我们可以将ui-view="" 放入父根<element>。有a working example。这将是'dashboard.exchange' 状态模板views/dashboard/exchange.html：

<div ui-view="">
  <h3>dashboard.exchange</h3>  
  <br />  
  context just for the state: <b>dashboard.exchange</b>  
</div>

最重要的是根<div ui-view="">，因为孩子将完全取代父母。

第二种方法，目标祖父母

在这种情况下，我们将跳过父级。我们将直接针对祖父母“仪表板”。有a working plunker。这里我们使用绝对命名来定位祖父未命名视图：

.state('dashboard.exchange.module',{
    views : {
      '@dashboard' : {
        templateUrl:'views/dashboard/exchangeModule.html',
        controller: 'ExchangeModuleCtrl',
      },
    },
    url:'/module/{exchangeModuleHostName}',
})

查看这些类似的问答以了解有关绝对命名的更多详细信息：

• Angularjs ui-router not reaching child controller
• Angular UI router nested views

答案的原始部分

如果我们想遵循标准方法 - 有a working example

您的代码应该可以正常工作。

最重要的是，每个父母必须包含一个孩子的目标：ui-view=""，例如：

<div ui-view=""></div>

视图views/dashboard/main.html 必须包含子状态目标'dashboard.exchange'

<div >
  <h2>dashboard</h2>      
  <br />      
  <div ui-view=""></div> // this is for child exchange      
</div>

视图views/dashboard/exchange.html 必须包含子状态的目标'dashboard.exchange.module'

<div >
  <h3>dashboard.exchange</h3>      
  <br />      
  <div ui-view=""></div> // this is for child module      
 </div>

查看here