CODEWITHSUNDEEP
angularjsnestedstateangular-ui-router
mesibo
mesibo

Reputation: 4333

AngularJS UI-Router multiple views - load only in a view

In AngularJS, how to load only a particular named view? For example, in below code, if contact is selected, I like it to load only in bottomview and keeping rest of the views (say topview) as it is. Unfortunately, AngularJS is loading all the views. Any idea what am I doing wrong?

.state('home', {
    url: '/home',
    views: {
        'topview': {templateUrl: 'top.html'},
        'bottomview': {templateUrl: 'bottom.html'}
    }
})

.state('contact', {
    url: '/contact',
    views: {
        'bottomview': {templateUrl: 'contact.html'}
    }
})

Upvotes: 1

Views: 107

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123891

Your idea is good, and could be achieved with state nesting:

.state('home', {
    url: '/home',
    views: {
        'topview': {templateUrl: 'top.html'},
        'bottomview': {templateUrl: 'bottom.html'}
    }
})

.state('home.contact', {
    url: '/contact',
    views: {
        'bottomview@': {templateUrl: 'contact.html'}
    }
})

So, 'contact' is now child state of 'home', and it means, that

  • all views loaded by parent ('home')
  • and not replaced by child ('contact')

are not reloaded when contact is selected.

Note, that in case, that we target bottomView of the index.html, we need to use view absolute naming - 'bottomview@', e.g. check more details here Angularjs ui-router not reaching child controller

Upvotes: 2

Related Questions