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
"[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
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