CODEWITHSUNDEEP
angularjsangularjs-scopeangular-ui-router
Maruf
Maruf

Reputation: 900

Angular - How to Prevent Destroying Scope w/ State Change

Disclaimer I am not looking for a simple parent/child ui-router relationship

I am looking for a solution where I am on one page and I can change to any arbitrary state without removing the contents/listeners of the previous state.

Use Case:

The idea is that I wouldn't need to be on any specific child state to have this work.

Upvotes: 1

Views: 1543

Answers (2)

Chris T
Chris T

Reputation: 8216

You can do this with UI-Router Extras "Sticky States".

Here is the UI-Router Extras modal demo: http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/

Add UI-Router Extras:

  <script src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>

var app = angular.module('plunker', ['ui.router', 'ct.ui.router.extras', 'ui.bootstrap']);

Add a named ui-view for the app and one for the modal

<body>
  <div ui-view="app"></div>
  <div ui-view="modal"></div>
</body>

Mark your app state as sticky. The effect is that you can navigate from any app.* state to the modal state... instead of exiting that state, it will only "inactivate" it, and it remains in the DOM.

$stateProvider
.state("app", {
  template: "<div ui-view></div>",
  sticky: true,

Upvotes: 3

Nikola Yovchev
Nikola Yovchev

Reputation: 10226

You can't be on many states at once. Modals have their own scope, to which you can pass your own stuff and usually modals are not associated with a state switch.

  1. Reconsider that a modal should require a state switch
  2. Modals have their own scope, destroying which doesn't affect the scope of the place from where they were called in any way.

Upvotes: 0

Related Questions