CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Vixxd
Vixxd

Reputation: 294

Angular UI Router - Change a child menu ui-view based on another ui-view

I have a root page (index.html) with a sidebar ("menu") and main content div ("main"), so two ui-view divs - one called "menu" and one called "main". enter image description here

When the main content area has a list of sites (/sites), I want the sidebar to be a generic menu. I have achieved this using angular-ui's "views" property for a particular url (i.e. https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views)

$stateProvider
  .state('sites', {
    views: {
      'main': { ... list of sites template ... },
      'menu': { ... generic menu template ...},
    }
  })

When I click a particular site (/sites/:siteName), I want to populate the main content area with the page for this site, and update the menu to a specific menu for site options.

enter image description here

$stateProvider
  .state('sites.detail', {
    views: {
      'main': { ... sites.detail template ...},
      'menu': { ... specific site options menu ...},
    }
  })

With this, the link is generated correctly when looking at the source (href has /sites/) but nothing happens when a link is clicked - no views are updated/changed. Is there a better way to attempt this? Do the child views have to communicate with each other somehow?

Upvotes: 0

Views: 211

Answers (1)

JanS
JanS

Reputation: 2075

You have to reference the views correctly. You can use absolute naming in this case:

$stateProvider
  .state('sites.detail', {
    views: {
      'main@sites': { ... sites.detail template ...},
      'menu@sites': { ... specific site options menu ...},
    }
  })

More information: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Upvotes: 1

Related Questions