Angular ui-router: How to load child controller instead of parent controller?

Question

I have the following nested routes in my Angular app:

.state('mapping', {
    url: '/mapping',
    templateUrl: 'app/components/mapping/mapping.html',
    controller: 'MapCtrl as map',
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '',
    templateUrl: 'app/components/mapping/partials/all.html',
    authenticate: true
})
.state('mapping.project', {
    url: '/:projectName',
    controller: 'ProjectCtrl as proj',
    templateUrl: 'app/components/mapping/partials/project.html',
    authenticate: true
})

When accessing 'mapping.project', ProjectCtrl never gets loaded. Instead, MapCtrl is loaded as if I was still on the parent state.

How can I override the parent controller with another controller that is specific to that child state?

I want this controller to get loaded every time I access that specific child state, which just won't happen if I have a single parent controller for every child state.

Radim Köhler Radim Köhler · Accepted Answer · 2015-10-11T08:31:40

Any controller is related to view (not to state). It means, that if:

...When accessing mapping.project, ProjectCtrl never gets loaded....

That view was not loaded. And it mostly means, that parent view (app/components/mapping/mapping.html) did not contain target:

<div ui-view=""></div>

So, if we will place into parent template a target (ui-view=""), child state will inject its view into that place. But that will not replace the parent controller. It will

call parent ctrl when parent (or child directly) is accessed
if child is accessed from parent, parent ctrl won't be reinit, but child ctrl will be initiated

Check these for more details:

Angular ui-router: How to load child controller instead of parent controller?

1 Answers