javascript - 如何在同一状态下的参数化 URL 之间导航？

Question

我有一个父状态 myApp 和一个子状态 planManager。 planManager 是一个 View ，包含三个参数定义的 URL:planManager/a、planManager/b 和 planManager/c，其中 a、b 和 c 是定义在以下位置的参数:

.config(function config( $stateProvider, $urlRouterProvider ) {
 $stateProvider.state( 'planManager', {
 url: '/planManager/:state',
 views: {
  "main": {
    controller: 'planManagerControl',
    templateUrl: 'planManager/planManager.tpl.html'
  }
 },
data:{ pageTitle: 'Plan Manager' }
});

根据状态参数“state”，我在模板中显示和隐藏 3 个 div。

我可以使用

从父状态导航到 planManager

<a href ui-sref="planManagerTest({state: 'a'})">Plan Manager</a>

但我无法导航到

 planManagerTest({state: 'b'}) or planManagerTest({state: 'c'}) 

来自 planManagerTest({state: 'a'})

我已经尝试过，，..但我不断收到错误“无法从 planManager 导航到状态/”

我怎样才能完成这个导航？

编辑:我解决了这个问题..只是语法错误 - 我尝试过

<a  href ui-sref=".({state: 'b'})">

导航开始发挥作用!

Answer 1

您遇到的问题最有可能是:

• Absolute State Name or Relative State Path (引用)

The name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.

Some examples:

• $state.go('contact.detail') will go to the 'contact.detail' state
• $state.go('^') will go to a parent state.
• $state.go('^.sibling') will go to a sibling state.
• $state.go('.child.grandchild') will go to a grandchild state.

和ui-sref的使用方法几乎一样。请参阅此评论:

A note on relative ui-sref targets:

You can also use relative state paths within ui-sref, just like the relative paths passed to state.go(). You just need to be aware that the path is relative to the state that the link lives in, in other words the state that loaded the template containing the link.

为了证明这一切，有一个 plunker :

假设我们有这样定义的父状态和子状态:

$stateProvider.state('myApp', {
    url: '/myApp',
    templateUrl: 'myApp.tpl.html',
  });
  $stateProvider.state('myApp.planManager', {
    url: '/planManager/:state',
    views: {
      "main": {
        controller: 'planManagerControl',
        templateUrl: 'planManager.tpl.html',
      }
    },
    ...

然后在根目录(index.html)内部我们可以/必须使用绝对:

<ul>
  <li><a ui-sref="myApp.planManager({state:'a'})">myApp.planManager({state:'a'})</a></li>
  <li><a ui-sref="myApp.planManager({state:'b'})">myApp.planManager({state:'b'})</a></li>
  <li><a ui-sref="myApp.planManager({state:'c'})">myApp.planManager({state:'c'})</a></li>
</ul>

这可能是 myApp 状态，从子级的相对路径中获益:

<ul>
  <li><a ui-sref=".planManager({state:'a'})">.planManager({state:'a'})</a></li>
  <li><a ui-sref=".planManager({state:'b'})">.planManager({state:'b'})</a></li>
  <li><a ui-sref=".planManager({state:'c'})">.planManager({state:'c'})</a></li>
</ul>

来自 planManager 状态的兄弟调用

<ul>
  <li><a ui-sref=".({state:'a'})">.({state:'a'})</a></li>
  <li><a ui-sref=".({state:'b'})">.({state:'b'})</a></li>
  <li><a ui-sref=".({state:'c'})">.({state:'c'})</a></li>
</ul>

example is here