angular-ui-router 的嵌套状态重定向到父状态

Question

我正在尝试在 AngularJS 上使用 ui-routes 创建嵌套状态：

.state('compare', {
    url: '/compare',
    templateUrl: '/views/compare.list.html',
    controller: 'CompareListCtrl'
})

.state('compare.compare', {
    url: '/compare',
    templateUrl: '/views/compare.table.html',
    controller: 'CompareTableCtrl'
})

.state('compare.compareTwo', {
    url: '/:models',
    templateUrl: '/views/compareTwo.html',
    controller: 'CompareTwoCtrl'
})

如果我转到 compare/compare 或 compare/thinkpad-t400-and-thinkpad-x200，url 保持不变，但 "compare" 状态视图和控制器显示。

为什么会这样，我该如何解决？

Answer 1

我创建了 working plunker here。我猜，您忘记为 child 个州提供目标。

这应该是 parent 视图

<div>
    <h1>compare</h1>

    with a target for child here:

    <hr />

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

检查是否有anchor/target<div ui-view="">。这样，每个 child 都将被注入到 parent 的未命名视图中。

在几乎相同的（plunker 调整）状态下它正在工作：

  $urlRouterProvider.otherwise('/compare');

  // States
  $stateProvider
    .state('compare', {
      url: '/compare',
      templateUrl: 'views/compare.list.html',
      controller: 'CompareListCtrl'
    })

  .state('compare.compare', {
    url: '/compare',
    templateUrl: 'tpl.html',
    controller: 'CompareTableCtrl'
  })

  .state('compare.compareTwo', {
    url: '/:models',
    templateUrl: 'tpl.html',
    controller: 'CompareTwoCtrl'
  });

检查一下in action here

angular-ui-router 的嵌套状态重定向到父状态

Nested states with angular-ui-router redirected to the parent state

angularjs

routes

angular-ui-router