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，则网址保持不变，但"compare"状态视图和控制器显示。

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

Answer 1

我创建了working plunker here。我猜，你忘了为儿童州提供目标。

这应该是父视图

<div>
    <h1>compare</h1>

    with a target for child here:

    <hr />

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

检查是否存在锚点/目标 <div ui-view=""> 。这样，每个孩子都会被注入父母的未命名视图中。

通过几乎相同的（弹药调整）状态，它正在起作用：

  $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的嵌套状态重定向到父状态

1 个答案: