Default child state solution does not work with ui-sref links

[filipesilva]

(follow up from #497)

As per the FAQs, to setup a default child state you merely have to set url: "" on the child.

That works well for href links, but nor for ui-sref ones, which has the side effect of also making ui-sref-active not work.

Plunkr: http://plnkr.co/edit/MhJael2qqrGtXe4VHsQO?p=preview

[eddiemonge]

Since you are defining what you want to be the "default" state, you have to transition to that state. Default does not mean redirectTo. Thats a feature thats planned for the future. Using regular 'href' doesn't do the same even though it certainly appears to. It actually transition to the child state directly, as if you have put 'parent.childState' in a ui-sref.

[filipesilva]

I think I see the difference between default and redirectTo now.

So the FAQ entry about setting up a default child state can only ever work for href links, correct? An ui-sref link would always target a specific state and thus not work (and neither would ui-sref-active).

[filipesilva]

I was re-reading the original thread and as per @nateabele response to @pduey, this difference in behavior should not happen. Am I missing something here?

[timricker]

@filipesilva did you ever get to the bottom of this or find a workaround?

Its not clear if there is there in fact a gap in functionality to set a default child state with parent abstract state (when using ui-sref), or if this should be working.

[filipesilva]

No, I didn't get any further on this topic. At the moment I just use the redirectTo implementation described in #1584 (comment), it's been working well for me in production so far.

[joaovieira]

I managed to work around by removing the abstract state and have the detail targeting the grandparent state.

Before:

.state('app.resources.products', {
  abstract: true,
  url: '/products',
  template: '<ui-view/>'
})
.state('app.resources.products.list', {
  url: '',
  template: '<div>Products list</div>'
})
.state('app.resources.products.detail', {
  url: '/:productId',
  template: '<div>Product detail</div>'
})

<!-- not working -->
<a ui-sref-active="active" ui-sref='app.resources.products'></a>

After:

.state('app.resources.products', {
  url: '/products',
  template: '<div>Products list</div>'
})
.state('app.resources.products.detail', {
  url: '/:productId',
  views: {
    '@app.resources':{
      template: '<div>Product detail</div>'
    }
  }
})

<a ui-sref-active="active" ui-sref='app.resources.products'></a>