1

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?

Improve this question
3
  • Why do you double declare each view? Commented Dec 13, 2014 at 9:40
  • @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. Commented Dec 13, 2014 at 9:45
  • I added a plunker, which should asnwer all the remaining uncertainities ;) Commented Dec 13, 2014 at 9:56

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

and what if I have <div ui-view="innerView"> inside of <div ui-view="mainView">?
Give me sec, I will create a draft how to in a plunker ... should be better then words
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!
I created another plunker here 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 ;) ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.