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

Question

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.

koox00 · Accepted Answer · 2016-05-21T18:14:34.440

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

@ should be after view name, not before. Plus - main is ok, but chat not filling. — Kindzoku, May 18 '16 at 08:42
No problem! look at this btw http://stackoverflow.com/a/32988554/4159720 to catch errors in the resolve :) — koox00, May 18 '16 at 08:54

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

1 Answers1