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
– Asad Palekar

2015-10-11 08:33:45 +00:00
Commented Oct 11, 2015 at 8:33 — Asad Palekar
– Asad Palekar, Commented Oct 11, 2015 at 8:33
Yes, it does contain a project name.

Tiago
– Tiago

2015-10-11 08:35:04 +00:00
Commented Oct 11, 2015 at 8:35 — Tiago
– Tiago, Commented Oct 11, 2015 at 8:35

Community · Accepted Answer · 2017-05-23 11:44:49Z

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, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 11, 2015 at 8:31

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tiago Over a year ago

I do have a <div ui-view></div> within mapping.html. Should I replace it with <div ui-view=""></div>?

Radim Köhler Over a year ago

No, that won't be the issue ... I could show you that in a plunker.. sec please

Tiago Over a year ago

I've seen this plunkr you created: 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.

Radim Köhler Over a year ago

Exactly... that is the way to go

Radim Köhler Over a year ago

Here is the plunker 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 ;)

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related