Ui-router State Change: Keep Controller and Scope but Destroy DOM

Question

I am using ui-router 1.0.0-beta.3, angular 1.5. So far, ui-router is awesome!

I have a root state, with some child states so far, but I noticed switching between siblings (children of the same root parent) causes complete recreation of the state I transition/go to.

I'd like to keep the scope variables around because, in my app, users may toggle some buttons, enter dates, etc, then maybe switch to another state, do something, and switch back but now all their partial work is gone. I'd also like the option to be able to destroy DOM for "inactive" states since in practice some of the states can get pretty large or users might create a lot of DOM so I'd like to keep the DOM as light as possible for some states.

I understand that ui-router-extras sticky-states feature is exactly this! And I could use the $state.includes function to target when I want to destroy DOM on some components. However, it seems ui-router-extras does not work with ui-router 1.0.0-beta.3. The author did make a port for the newer ui-router, but the release is in typescript and I am not sure how to compile that into a single js file. See: https://github.com/ui-router/sticky-states/issues/4

Perhaps I need a solution that does not use sticky-states --- any ideas? I was thinking of using a service to cache the scope values, and indeed read some other SO answers to that affect. This means that, per component, I'd need to handle which scope values to cache, etc. This is definitely a possibility, but I am wondering if anyone has any other techniques or knowledge about ui-router such that maybe there is another way to accomplish what I am after: cached controller/scope on transition change.

Answer 1

After reading the author's typescript source code (which was a pleasure, very well-written code) from:

https://github.com/ui-router/sticky-states/blob/master/src/stickyStates.ts

I decided to migrate it to my own service in javascript, which would be compatible with ui.router 1.0.0-beta.3. By the way, ui.router 1.0.0-beta.3 is available at:

https://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js

My approach was: because 1.0.0-beta.3 appears to not have the onCreate transition hook, I would decorate the $transitions.create function itself. To do this, I needed to inject a lot of helper functions and the core functionality of sticky states into the decoration. So I made the StickyStatesUtil provider to do this for me.

The migration consists of 2 parts: (1) a module called sticky-states-util, which creates the StickyStatesUtil provider, as well as a useful service for checking if a state/state-name is inactive, and an inactiveEvent, which, if set to a value, will cause $rootScope to broadcast a json map of inactive state-names for anything in the app to consume. If not set, that is skipped. And (2), the actual config block in the angular app that injects $provide and uses that to decorate the $transitions service with a new "create" function.

Since a couple others are in the same spot as me, I made this code available on github:

https://github.com/dsills22/sticky-states-ui-router-1-js