AngularJS ui-router not working for child state

Question

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.

Ben Wheeler · Accepted Answer · 2015-04-15 22:52:23Z

1

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.

answered Apr 15, 2015 at 22:52

Ben Wheeler

7,6022 gold badges49 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Wheeler Over a year ago

In fact, it looks like there are more situations in which the controller section is ignored... if you use ui-router named views, then the whole state's controller section is ignored, but you can put a controller section inside each of the named views!

Collectives™ on Stack Overflow

AngularJS ui-router not working for child state

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related