angularjs - ui-router sref to grandchild with parameter in child -

angularjs - ui-router sref to grandchild with parameter in child -

how can create sref take me grandchild state, when have parameter in url kid state?

here's 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 baz, , if clicked foo state, should bing baz!'});

there an example. can phone call (i've removed abstract show more variants, middle state abstract! not straight 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 redefined states, providing calls children state relative stat syntax:

$stateprovider .state('foo', { url: '/', template: '<div><h3>i. 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. 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. foo.bar.baz state</h5>' + '<div ui-view></div>' + ' </div>', });

see more in plunker

angularjs angular-ui-router