CODEWITHSUNDEEP
angularjsangular-ui-router
Jon Thompson
Jon Thompson

Reputation: 436

ui-router sref to grandchild with parameter in child

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!'});

Upvotes: 2

Views: 1584

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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

Upvotes: 5

Related Questions