CODEWITHSUNDEEP
angularjsangular-ui-router
Kindzoku
Kindzoku

Reputation: 1420

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.

Upvotes: 1

Views: 330

Answers (1)

koox00
koox00

Reputation: 2731

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

Upvotes: 1

Related Questions