makki makki - 6 months ago 32
AngularJS Question

ui-router nested route controller isn't being called

I am trying to call a controller which should be linked with the

home.category
route but it isn't being called. What's wrong in it?

$stateProvider
.state("home", {
// Use a url of "/" to set a states as the "index".
url: "/",
templateUrl: APP_CONFIG.baseUrl +
'partials/layouts/home.html',
controller: 'MainCtrl'
})
.state("home.category", {
// Use a url of "/" to set a states as the "index".
url: "c/:categoryId/:categorySlug",
controller: function($stateParams) {
alert($stateParams.categoryId);
}
})

Answer

Well, I found a clue from the given documentation of ui-router the says

You can assign a controller to your template. Warning: The controller will not be instantiated if template is not defined.

https://github.com/angular-ui/ui-router/wiki#controllers

But I tried to add template and still didn't work, then I saw that my parent route template didn't have <div ui-view></div> (I mistakenly removed it) so when I added it back it worked :), So, to instantiate our child's route controller, we must have <div ui-view></div> in our parent's route template.