child state controller not being reached in angular-ui-router

Question

I have the following setup in my code

.config(function config($stateProvider)
    $stateProvider
      .state('home', {
        url : '/home',
          views : {
            'main' : {
              controller : 'HomeCtrl',
              templateUrl : 'home/home.tpl.html'
            }
          }
        })
      .state('home.details', {
        url : '/details',
        views : {
          " " : {
            template : "<h1>hello</h1>",
            controller : function ($scope, $http, $state) {
              //do some stuff here
              //does not seem to reach code in here
            }
         }
        }
  });
})
.controller('HomeCtrl', function ($scope, $http, $state) {
    //on a button click do $state.go('.details');
});

When I do this , the button click on my HomeCtrl seems to take me to /home/details but it does not seems to go inside the controller in that particular route at that point. (I checked by putting a break point inside the controller for the details.) Is there something wrong with my setup? I'm trying to do something similar to this sample app shown in the ui-router webpage.

Community · Accepted Answer · 2017-05-23 11:52:56Z

6

The solution here would in a named-view (not) matching. Here is the working plunker.

We have to place the named ui-view inside of the parent view (or use more precise naming, see for example here)

So, the parent, home template should contain the named ui-view, e.g. nameOtherThanSpace

<div ui-view="nameOtherThanSpace" ></div>

And the child defintion must target that view, the complete snippet is:

  $stateProvider
    .state('home', {
      url: '/home',
      views: {
        'main': {
          controller: 'HomeCtrl',
          template: '<div>' +
            '<h1>hello from parent</h1>' +
            '<hr />' +
            '<div ui-view="nameOtherThanSpace" ></div>' +
            '<div>',
        }
      }
    })
    .state('home.details', {
      url: '/details',
      views: {
        "nameOtherThanSpace": {
          template: "<h2>hello from a child</h3>",
          controller: function($scope, $http, $state) {},
        }
      }
    });

How to use more specific view names:

The working plunker using the name nameOtherThanSpace, instead of " " (space)

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 28, 2014 at 5:13

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

2 Comments

Deepak Over a year ago

Thanks, that works. I guess this statement When a state is activated, its templates are automatically inserted into the ui-view of its parent state's template in the docs, threw me off. I thought that meant the it didn't need a matching named view.

Radim Köhler Over a year ago

Correct, named views must match! good if that helped anyhow. Enjoy ui-router ;)

rob · Accepted Answer · 2014-05-27 19:05:26Z

1

Try registering your controller on the app instead of on your $stateProvider. e.g.

var app = angular.module('myApp', []);
app.controller('HomeCtrl', function ($scope, $http, $state) {
    //on a button click do $state.go('.details');
});

Update 1:

You should only need to specify a view if you have multiple views in which case the view probably needs to have a name. But you only have one view for that state so I would just do this.

.state('home.details', {
    url : '/details'
    template : "<h1>hello</h1>",
    controller : function ($scope, $http, $state) {
      //do some stuff here
      //does not seem to reach code in here
    }
}

edited May 27, 2014 at 19:05

answered May 27, 2014 at 18:38

rob

18.7k13 gold badges73 silver badges95 bronze badges

2 Comments

Deepak Over a year ago

Sorry, the controller is registered on the module. I just got the chaining wrong. I have edited it now. So it looks like angular.module(...).config(...).controller(...)

rob Over a year ago

@Deepak Updated my answer with another idea

Collectives™ on Stack Overflow

child state controller not being reached in angular-ui-router

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related