Abstract child state and grandchild state in angular with UI-Router

Question

Have had issues trying to implement an abstract child state that belongs to an abstract parent state and has child states itself. Something like the following:

.state('parent', {
  abstract: true,
  url: '/parent',
  templateUrl: 'parent/parent.html',
  controller: 'parent-controller',    
})

.state(parent.child', {
  abstract: true
  url: '/child',
  templateUrl: 'parent/child/child.html',
  controller: 'child-controller',
})

.state(parent.child.grandchild', {
  url: '/grandchild',
  templateUrl: 'parent/child/grandchild/grandchild.html',
  controller: 'grandchild-controller',
})

So far I haven't been able to get this to work, nor have I found any answers that deal with this question. The documentation only seems to cover parent-child, but doesn't get into grandchildren.

Is this possible with UI-Router in angular? Does my failure have to do with using dot notation when declaring the state name?

A common mistake would be not having ui-view in either parent or child template. If you have nothing to put in child.html, you can target parent's ui-view by using views: { "@parent": {...} } in grandchild. — Icycool

Radim Köhler Radim Köhler · Accepted Answer · 2016-05-24T11:27:56

This concept should be working. There is a working plunker

With just a few fixes of your typos

  .state('parent', {
    abstract: true,
    url: '/parent',
    templateUrl: 'parent/parent.html',
    controller: 'parent-controller',
  })

  .state('parent.child', {
    abstract: true,
    url: '/child',
    templateUrl: 'parent/child/child.html',
    controller: 'child-controller',
  })

  .state('parent.child.grandchild', {
      url: '/grandchild',
      templateUrl: 'parent/child/grandchild/grandchild.html',
      controller: 'grandchild-controller',
    })

to be sure we do have controllers

.controller('parent-controller', ['$scope', function($scope) {}])
.controller('child-controller', ['$scope', function($scope) {}])
.controller('grandchild-controller', ['$scope', function($scope) {}])

And with each parent having a target for its child

...
<div ui-view></div>
...

These links must work

<a href="#/parent/child/grandchild">    
<a ui-sref="parent.child.grandchild">

Check it in action here

Abstract child state and grandchild state in angular with UI-Router

1 Answers