In my Angular application, I have set up the following nested routes:
.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
})
Whenever I try to access 'mapping.project', the ProjectCtrl does not get loaded. Instead, it seems like the parent state's MapCtrl is being used.
Is there a way for me to replace the parent controller with a specific controller that is tailored to the child state?
I need this unique controller to be loaded every time I navigate to the particular child state. It is not feasible to use a single parent controller for all child states in this case.