Child state controller not reached in angular -ui-router

Question

I have the following setting 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 HomeCtrl on my HomeCtrl seems to bring me to / home / details, but it does not seem to be entering the controller on this particular route at this point. (I checked by setting a breakpoint inside the controller for details.) Is there something wrong with my setup? I am trying to do something similar to this sample application shown on the ui-router web page.

Answer 1

The solution here would be in a named-view (non) match. Here is a working plunker .

We must place the name ui-view inside the parent view (or use a more precise name, see, for example, here )

So, the parent, home template should contain the name ui-view , for example. nameOtherThanSpace

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

And the definition of a child should be aimed at this view, a complete fragment:

  $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 name names:

• Show Names - Relative and Absolute Names
• UI-Router does not correctly display child elements with a pattern in Asp.net Mvc

Work plunker using nameOtherThanSpace name instead of "" (space)

Answer 2

Try registering your controller in the application, and not on your $ stateProvider. eg.

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

Update 1:

You only need to specify a view if you have several views, in which case the view should probably have a name. But you only have one idea for this condition, so I’ll just do it.

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