Angularjs ui-router not reaching child controller

Question

I've got a config function:

function config($stateProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
    .state('projectsWs.tasks', {
        url: "/tasks",
        views: {
            "mainView": {
                templateUrl: "/app/projects/templates/index.php"
            },
            "innerView": {
                templateUrl: "/app/projects/templates/tasks.php",
                controller: tasksCtrl,
                controllerAs:'tasks'
            }
        }
    })
    .state('projectsWs.tasks.detail', {
        url: "/:taskId",
        views: {
            "mainView@": {
                templateUrl: "/app/projects/templates/index.php"
            },
            "innerView@mainView": {
                templateUrl: "/app/projects/templates/tasks.php",
                controller: function($stateParams) {
                    console.log('innerViewCtrl', $stateParams);
                }
            }
        }
    });}

InnerView is inside mainView. When I've got url like /projects-ws/tasks, tasksCtrl function works as expected. But when I've got url with an id, i.e. /projects-ws/tasks/32, I don't see any output, but I expect innerViewCtrl output, that's the problem I got. I think I've got a problem with absolute/relative views, but I've allready tried all combinations and it still don't work.

UPDATE: So now I've got following state:

state('projectsWs.tasks.detail', {
        url: "/:taskId",
        views: {
            "mainView@": {
                templateUrl: "/app/projects/templates/index.php",
                controller: function($stateParams) {
                    console.log('mainViewctrl', $stateParams);
                }
            },
            "innerView": {
                templateUrl: "/app/projects/templates/tasks.php",
                controller: function($stateParams) {
                    console.log('innerViewctrl', $stateParams);
                }

            }
        }
    })

as Radim Köhler said. It outputs mainViewctrl Object {taskId: "32"}, but how can I reach $stateParams.taskId from innerView now?

@BenDiamant shouldn't I? Seems that child states don't inherit controllers from parent states. Anyway, in `projectsWs.tasks` state I've got empty `$stateParams` object. — Ledzz, Dec 13 '14 at 09:45
I added a plunker, which should asnwer all the remaining uncertainities ;) — Radim Köhler, Dec 13 '14 at 09:56

Radim Köhler · Accepted Answer · 2014-12-13T09:54:32.733

Absolute naming with UI-Router works a bit differntly then you've used it

.state('projectsWs.tasks.detail', {
    url: "/:taskId",
    views: {
        "mainView@": {
            templateUrl: "/app/projects/templates/index.php"
        },
        // this won't work, because the part after @
        // must be state name
        "innerView@mainView": {

        // so we would need this to target root, index.html
        "innerView@": {

        // or this to target nested view inside of a parent
        "innerView": {

        // which is the same as this
        "innerView@projectsWs.tasks": {

Check the:

View Names - Relative vs. Absolute Names

small cite:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

I created a working example here, and the states are like this

$stateProvider
.state('projectsWs', {
  template: '<div ui-view="mainView" ></div>' +
   '<div ui-view="innerView" ></div>',
})
$stateProvider
.state('projectsWs.tasks', {
    url: "/tasks",
    views: {
        "mainView": {
            //templateUrl: "/app/projects/templates/index.php"
            template: "<div>main view tasks </div>",
        },
        "innerView": { 
            //templateUrl: "/app/projects/templates/tasks.php",
            template: "<div>inner view tasks </div>",
        }
    }
})
.state('projectsWs.tasks.detail', {
    url: "/:taskId",
    views: {
        "mainView@projectsWs": {
            //templateUrl: "/app/projects/templates/index.php"
            template: "<div>main view task {{$stateParams | json }} </div>",
        },
        "innerView@projectsWs": {
            //templateUrl: "/app/projects/templates/tasks.php",
            template: "<div>inner view task {{$stateParams | json }} </div>",
        }
    }
});

What we can see is, that the grand parent projectsWs is injecting into index.html (root) <div ui-view=""> some template, with two named anchors:

template: '<div ui-view="mainView" ></div>' +
          '<div ui-view="innerView" ></div>',

this are then used in list and detail states, with relative resp absolute names

Check it here in action

Give me sec, I will create a draft how to in a plunker ... should be better then words — Radim Köhler, Dec 13 '14 at 10:03
I've already done this and it works, thank you! Also it would be cool if you explain why its bad, thank you a lot! — Ledzz, Dec 13 '14 at 10:04
I created another plunker here http://plnkr.co/edit/nSSGcrDSWJjHaq2KvFvw?p=preview, showing how you can use view nesting... Parent, injects into mainView ... of a grand parent. But then, it injects the innerView directly into its own view. Not to grand parent. Then child can change only the inner view. Hope this helps ;) Play with my examples. and ENJOY the mighty UI-Router ;) ;) — Radim Köhler, Dec 13 '14 at 10:08

Angularjs ui-router not reaching child controller

1 Answers1

View Names - Relative vs. Absolute Names

Linked