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.

Answer 1

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:

• View Names - Relative vs. Absolute Names
• UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc

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

Answer 2

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