Kindzoku Kindzoku - 6 months ago 15
AngularJS Question

AngularJS router-ui. Load child state in named view on the same level as parent

What i'm trying to do:

<div id="chat">
<div ui-view>Here should people.htm be loaded</div>
<div ui-view="chat">Here is current person chat peopleChat.htm</div>
</div>


I already managed a nested structure. If "chat" is child of "people" - no problem.

But I want em to remain on the same level, but be in a different state. Something like.

$stateProvider
.state('people', {
url: '/people',
templateUrl: ...,
controller: ...
})
.state('people.chat', {
views: {
'chat': {
url: '/:personId',
templateUrl: ...,
controller: ...
}
}
})


My unnamed view is filling with data. After unnamed view is filling, i'm calling $state.go('people.chat', { personId: vm.personId });

But nothing is happening.

Answer

Name both views and you are ok:

<div id="chat">
     <div ui-view="main">Here should people.htm be loaded</div>
     <div ui-view="chat">Here is current person chat peopleChat.htm</div>
</div>

And your controler:

$stateProvider
    .state('people', {
        views: {
            'main@': {
                url: '/people',
                templateUrl: ...,
                controller: ...
            }
        }
    })
    .state('people.chat', {
        views: {
            'chat@': {
                url: '/:personId',
                templateUrl: ...,
                controller: ...
            }
        }
    })

Basically the @ absolute targets the view.
Meaning if you use it like chat@ it targets the named view chat in the root html.

If you want to nest the views you can use chat@people
which targets the ui-view loaded in the template that people state has injected.

Plunker

Comments