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?
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:
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
©2020 All rights reserved.