17

I have the following states in my ui-router state provider:

$urlRouterProvider.when('/parent', '/parent/child');
$stateProvider.state('parent', {
     url: "/parent",
     abstract: true
});

$stateProvider.state('parent.child', {
     url: "/child"
});

Which follows the best practice for having a default child state as explained here in the ui-router docs.

However, when I now include a link in my document somewhere referencing parent with ui-sref such as <a ui-sref="parent">Link</a> I always get an error saying I cannot transition to an abstract state. When I enter the URL manually into the address bar and hit enter everything works fine.

Related Plunker: http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

How can I combine ui-sref with default child states?

Robin
  • 8,197
  • 11
  • 45
  • 74

2 Answers2

29

abstract states can not be targeted directly. They mainly serve as a foundation to build child states on. The only reason it works fine with the URL is that the /parent gets caught by the .when

That means when you invoke a child using 

<a ui-sref="parent.child">

the child inside the parent gets loaded, meaning the parent will be loaded as the layer around it.

So, never target an abstract state itself. It's like having a door inside a door frame. You can only open and interact with the door (child), but never with the frame (parent) directly. However, when you interact with the door, the door and the frame are part of a system that gets loaded.

You can give the child an empty URL, so that it doesn't append anything to the parent state URL and will then be loaded.

See here for more info: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Chris Preston
  • 644
  • 8
  • 15
  • 4
    Sure I understand the limitations of an abstract state but thought that if it is possible to define a default child state it should also be possible to automatically forward all calls from the parent to the child (i.e. the logical behavior of `ui-sref` would be to forward to the default child state). In my case parent is currently abstract and not needed, but might later on become a page of itself (think overview page for an entire concept). But looks like that doesn't work well with ui-router. – Robin Jul 26 '14 at 11:14
  • as stated, giving the child state an empty URL you can access this child state using the parent's URL in the address bar. However, from the state of things, using ui-sref from the app itself you can only target the child directly – Chris Preston Jul 27 '14 at 22:10
  • This should be marked as the answer and +1 for the link. – ceebreenk Jan 13 '15 at 08:22
  • Is it possible to have nested abstract states like grandparent.parent.child where grandparent and parent are abstract states ? – shruti Mar 16 '15 at 05:58
  • Since this is the case, how would one transition from a `login` state to an abstract `dashboard` state? Or is there another way to accomplish that? – Leon Gaban Mar 14 '17 at 18:42
1

If you want to use $state's convenient naming structure for abstract states, you can use this in a service:

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' })
);

Or this in a template ($state must be available in the local or global $scope):

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a>

If I found myself doing this regularly, I would create a directive similar to ui-sref for this, minus the abstract state limitation.

Zane
  • 4,652
  • 1
  • 29
  • 26