Search code examples
angularjsmodal-dialogangular-ui-routerangular-ui-router-extras

Angular ui-router-extras modal: sticky states (background state gets updated)


I'm developping an Angularjs application using my self written modal system. When opening a modal window, the 'main' state needs to stay visible on the background. I want to achieve this by making the background state (main) sticky. This is my current setup:

// Base states
.state('main', {
  url: '/main',
  views: {
    'main': {
      templateUrl: 'app/main/main.html',
      controller: 'MainController'
    }
  },
  sticky: true,
  deepStateRedirect: true
})

.state('modal', {
  url: '/modal',
  views: {
    'modal': {
      templateUrl: 'app/modal/modal.html',
      controller: 'ModalController'
    }
  }
})

// Main states
.state('main.about', {
  url: '/about',
  templateUrl: 'app/about/about.html',
  controller: 'AboutController'
})
.state('main.help', {
  url: '/help',
  templateUrl: 'app/help/help.html',
  controller: 'HelpController'
})

// Modal states
.state('modal.menu', {
  templateUrl: 'app/menu/menu.html',
  controller: 'MenuController'
})

My index.html has two ui-views (main and modal). It works great, however, when I go to the about page, open the menu (in a modal), click on the help page and open the menu again, instead of showing the help page in the background, it shows the about page.

Can anyone tell me what is going on? The main state gets updated when I click a modal state link.


Solution

  • Fixed! I reverted back to ui-router-extras 0.0.13 and included all the modular dependencies (I only had sticky and dsr before) and that did the trick (wondering why I didn't do that in the first place...).