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

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

第一个选项，整个parent是一个目标

我们可以将 ui-view="" 放入 parent 根目录 <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="">，因为child将完全取代parent。

第二种方法，目标大 parent

在这种情况下，我们将跳过 parent。我们将直接针对grand parent 'dashboard'。有a working plunker。这里我们使用绝对命名来定位 grand parent unnamed view:

.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

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

最重要的是，每个parent必须包含child的目标：ui-view=""，例如：

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

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

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

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

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

检查一下here

AngularUI 嵌套路由问题

AngularUI Nested Routing Issue

angularjs

angular-ui

angular-ui-router

第一个选项，整个parent是一个目标

第二种方法，目标大 parent

答案的原始部分