UI路由器SREF与儿童参数孙子 [英] ui-router sref to grandchild with parameter in child

问题描述

如何创建一个SREF会带我去一个孙子状态，当我在网址为孩子状态的参数？

下面是一些伪code：

  .STATE（'富'，{网址：'/'，模板：'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;＆LT;一个UI的SREF =富.bar.baz（巴：'冰'）＆GT;兵巴兹＆LT; / A＆GT;'}）
.STATE（'foo.bar'，{网址：'：酒吧，摘要：真实，templateURL：bar.tpl.html'}）
.STATE（'foo.bar.baz'，{网址：'/巴兹'，模板：我是一个巴兹，如果你从foo的状态点击，我应该是一个兵巴兹！'}）;
 

解决方案

有的例如的。我们可以这样调用的（我已经删除了抽象表现出更多的变种，但中间状态可以是抽象只是没有通过URL直接访问！）的：

 ＆LT;一个UI的SREF =foo的＆GT;富＆LT; / A＆GT;
＆LT;一个UI的SREF =foo.bar（{吧：'冰'}）＆GT; foo.bar（{吧：'冰'}）LT; / A＆GT;
＆LT;一个UI的SREF =foo.bar.baz（{吧：'冰'}）＆GT; foo.bar.baz（{吧：'冰'}）LT; / A＆GT;
 

和有被重新定义的状态，这是向儿童提供通话状态，相对统计语法：

  $ stateProvider
    .STATE（'富'，{
      网址：'/'，
      模板：'＆LT; D​​IV＆GT;＆LT; H3＆GT;我。 foo的状态和LT; / H3和GT;' +
      孩子：其中，一个UI的SREF =酒吧（{吧：\\'冰\\'}）＆GT; .bar.baz（{条：\\'冰\\'}）LT; / A＆GT;' +
      '＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;' +
      '＆LT; / DIV＆GT;，
    }）
    .STATE（'foo.bar'，{
      网址：'：酒吧'，
      //摘要：真实，
      模板：'＆LT; D​​IV＆GT;＆LT; H4＆GT; II。该foo.bar国家＆LT; / H4＆GT;' +
      孩子：其中，一个UI的SREF =巴兹（{吧：\\'冰\\'}）＆GT; .baz（{条：\\'冰\\'}）LT; / A＆GT;' +
      '＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;' +
      '＆LT; / DIV＆GT;，
    }）
    .STATE（'foo.bar.baz'，{
      网址：'/巴兹'，
      模板：'＆LT; D​​IV＆GT;＆LT;＆H5 GT; III。该foo.bar.baz国家＆LT; / H5＆GT;' +
      '＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;' +
      '＆LT; / DIV＆GT;，
    }）;
 

查看更多在 plunker

How can I create a sref that will take me to a grandchild state, when I have a parameter in the URL for the child state?

Here's some pseudocode:

.state( 'foo', {url:'/', template:'<div ui-view></div><a ui-sref="foo.bar.baz(bar: 'bing')">Bing Baz</a>'})
.state( 'foo.bar', {url:':bar',abstract: true, templateURL:'bar.tpl.html'})
.state( 'foo.bar.baz', {url:'/baz', template:'I am a baz, and if you clicked from the foo state, I should be a Bing Baz!'});

解决方案

There is an example. We can call it like this (I've removed the abstract to show more variants, but the middle state could be abstract! just not directly accessible via url):

<a ui-sref="foo">foo</a>
<a ui-sref="foo.bar({bar:'bing'})">foo.bar({bar:'bing'})</a>
<a ui-sref="foo.bar.baz({bar:'bing'})">foo.bar.baz({bar:'bing'})</a>

And there are redefined states, which are providing calls to children state with a relative stat syntax:

  $stateProvider
    .state('foo', {
      url: '/',
      template: '<div><h3>I. The foo state</h3>' + 
      'Child : <a ui-sref=".bar({bar: \'bing\'})">.bar.baz({bar: \'bing\'})</a>' +
      '<div ui-view></div>' +
      ' </div>', 
    })
    .state('foo.bar', {
      url: ':bar',
      //abstract: true,
      template: '<div><h4>II. The foo.bar state</h4>' + 
      'Child : <a ui-sref=".baz({bar: \'bing\'})">.baz({bar: \'bing\'})</a>' +
      '<div ui-view></div>' +
      ' </div>',
    })
    .state('foo.bar.baz', {
      url: '/baz',
      template: '<div><h5>III. The foo.bar.baz state</h5>' + 
      '<div ui-view></div>' +
      ' </div>',
    });

See more in the plunker

这篇关于UI路由器SREF与儿童参数孙子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！