Question

我有一个父状态myApp和一个子状态planManager。 planManager是一个包含三个参数定义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 （引用）

将转换到的状态的名称或相对状态路径。如果路径以^或开头。然后它是相对的，否则它是绝对的。

一些例子：


$state.go('contact.detail')将转到'contact.detail'州

$state.go('^')将转到父州。

$state.go('^.sibling')将进入兄弟姐妹州。

$state.go('.child.grandchild')将进入孙子州。

这与使用ui-sref的方式几乎相同。在那里看到这个评论：

关于相对ui-sref目标的说明：

您还可以在ui-sref中使用相对状态路径，就像传递给state.go()的相对路径一样。您只需要知道路径是相对于链接所在的状态，换句话说是加载包含链接的模板的状态。

为了证明这一切，有一个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',
      }
    },
    ...

然后在root（index.html）内部我们可以/必须使用absolute：

<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

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

1 个答案: