AngularJs UI-Router Nested states with side-by-side views

Question

I've got an AngularJS project using ui-router where we've setup a state with two side-by-side views:

$stateProvider
    .state('side-by-side', {url: '/side-by-side', views: {
        'listView': { templateUrl: 'list.html', controller: 'ListView' },
        'detailView': { templateUrl: 'detail.html', controller: 'DetailController'}
    }});

Now my detail.html file also contains a ui-view item called 'detailPage' that I would like to populate on a nested state of side-by-side, call it side-by-side.item. I'm not quite sure how to do this. I've tried the following:

.state('side-by-side.item', {url: /side-by-side/{itemId}/{pageId}, views: {
    'detailPage@detailView': {templateUrl: 'detailPage.html', controller: 'PageController'}
}});

but this doesn't seem to work. Any clues?

Many thanks in advance,

Joseph.

Chandermani · Accepted Answer · 2013-09-13 07:18:47Z

0

Can you try one of the following

.state('side-by-side.item', {url: /side-by-side/{itemId}/{pageId}, views: {
    '[email protected]': {templateUrl: 'detailPage.html', controller: 'PageController'}
}});

or

.state('side-by-side.item', {url: /side-by-side/{itemId}/{pageId}, views: {
    'detailPage@side-by-side': {templateUrl: 'detailPage.html', controller: 'PageController'}
}});

answered Sep 13, 2013 at 7:18

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

Collectives™ on Stack Overflow

AngularJs UI-Router Nested states with side-by-side views

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related