ui-router nested route controller isn't being

问题:

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);
    }
  })

回答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.

回答2:

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>'
        }
    }
})

回答3:

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