Angularjs ui-router not reaching child controller
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: {
"[email protected]": {
templateUrl: "/app/projects/templates/index.php"
},
"[email protected]": {
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: {
"[email protected]": {
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?
Answers:
Absolute naming with UI-Router works a bit differntly then you've used it
.state('projectsWs.tasks.detail', {
url: "/:taskId",
views: {
"[email protected]": {
templateUrl: "/app/projects/templates/index.php"
},
// this won't work, because the part after @
// must be state name
"[email protected]": {
// so we would need this to target root, index.html
"[email protected]": {
// or this to target nested view inside of a parent
"innerView": {
// which is the same as this
"[email protected]": {
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
[email protected], 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: {
"[email protected]": {
//templateUrl: "/app/projects/templates/index.php"
template: "<div>main view task {{$stateParams | json }} </div>",
},
"[email protected]": {
//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