ui-router nested route controller isn't being called

Question

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?

$statePro         


        

Answer 1

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.

Answer 2

In the off event someone is changing a project to work with ui.router as opposed ngRoute, I had this issue because I forgot to change the ng-view directive to ui-view :Z

Answer 3

Another reason the controller may not be called is if you have multiple views for a state and don't put the controller inside the views object. This is difficult to find because there is no error. It just doesn't get called.

This controller won't be called:

.state('home', {
    url: '/',
    controller: function($scope){ $scope.someThings = "some stuff"; },
    views: {
        "view1": {                
            template: '<p>{{someThings}}</p>'
        },
        "": {
            template:
                '<p>Some other stuff</p>'
        }
    }
})

The controller must go inside the views object:

.state('home', {
    url: '/',        
    views: {
        "view1": {                
            template: '<p>{{someThings}}</p>',
            controller: function($scope){ $scope.someThings = "some stuff"; },
        },
        "": {
            template:
                '<p>Some other stuff</p>'
        }
    }
})