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.

Can u share the final url? Does it contain a projectName? – Asad Palekar Oct 11 '15 at 08:33 — Asad Palekar, Oct 11 '15 at 08:33
Yes, it does contain a project name. – Tiago Oct 11 '15 at 08:35 — Tiago, Oct 11 '15 at 08:35

score 3 · Accepted Answer · edited May 23 '17 at 11:44

3

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:

edited May 23 '17 at 11:44

Community

1
1

answered Oct 11 '15 at 08:31

Radim Köhler

122,561
47
239
335

I do have a
within mapping.html. Should I replace it with
? – Tiago Oct 11 '15 at 08:36
No, that won't be the issue ... I could show you that in a plunker.. sec please – Radim Köhler Oct 11 '15 at 08:37
I've seen this plunkr you created: http://plnkr.co/edit/qzI25MKsXBUvw2b45bef?p=preview This problem is very very similar to what I have. I also need a lot of nested views with a sidebar on my Angular application. – Tiago Oct 11 '15 at 08:42
Exactly... that is the way to go – Radim Köhler Oct 11 '15 at 08:43
1

Here is the plunker http://plnkr.co/edit/1aQbOos1aoGhUIAg30r6?p=preview - it does what described above. If we go to mappings - substate `all` is selected as the default. If we pass the id, every time the `ProjectCtrl` is called, because its view is injected into parent `ui-view` (I added alert to that ctrl to show that feature... could be turned off ;) – Radim Köhler Oct 11 '15 at 08:48
I am very sorry but it turns out I still have the same problem, this is giving me a big headache: http://stackoverflow.com/questions/33076944/angular-ui-router-child-state-controller-not-getting-called I tried to give more information here. I know that your plunkr is working, so I don't understand what I'm doing wrong. – Tiago Oct 12 '15 at 08:54
I tried to find some quick solution... added answer. Let me know if I should remove it (to get other form some others) – Radim Köhler Oct 12 '15 at 09:13

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

1 Answers1