CODEWITHSUNDEEP
angularjsangular-ui-router
Ben Wheeler
Ben Wheeler

Reputation: 7344

AngularJS ui-router not working for child state

I'm trying to get a child state working properly.

Each of these states shows up fine, when I test the corresponding urls. But there's one problem... 

app.config(['$stateProvider', function($stateProvider) {
  $stateProvider.state('root', { // works 100%
    url: '/',
    controller: function($scope) {
      alert("state: root");
    },
    templateUrl: 'root.html'
  })
  .state('program', {  // works 100%
    url: '/program',
    controller: function($scope) {
      alert("state: program");
    },
    templateUrl: 'program.html'
  })
  .state('program.new', {  // works only sorta!
    url: '/new',
    controller: function($scope) {
      alert("state: program.new");
    },
    templateUrl: 'program.new.html'
  });
}]);

...For program.new, the correct state is being chosen (I'm logging transitions in the debugger using this: https://stackoverflow.com/a/20786262/2308190 ), but only the alert("state: program") fires, not the alert("state: program.new"). Plus, the program.html template shows up, instead of the program.new.html template.

Doesn't the controller of a child state get a chance to run? And why doesn't the child's template show up?

To be clear, Angular is figuring out the proper state, program.new. It just doesn't seem to run the controller or render the template.

Upvotes: 2

Views: 1247

Answers (1)

Ben Wheeler
Ben Wheeler

Reputation: 7344

Figured it out: the program.html template had no directive inside it, so there was nowhere for the child state, program.new, to render into... and the controller only runs if the view is going to render.

Upvotes: 1

Related Questions