How to setup "sticky-states" with views about sticky-states

[poindexd]

+1

[soroushNeshat]

of course it wont change unless u exit the parent state . a sticky state is sticky . it cant be removed until parent is exited . problem is that you are sharing ui-view='view1' for both of the sticky states . u have to create a ui-view for each widget in your parent state like this :

ui-view='widget1'
ui-view='widget2'
ui-view='widget3'
from sticky-states.

[buksy90]

Unfortunately that is not possible in current project :/.

From my point of view, the ideal workflow for sticky states would be something like this (pseudo):

state_entered() {
  #create scope
  if(cache[state.name]) scope = cache[state.name].scope
  else scope = $rootScope.new();

  #create controller
  if(cache[state.name]) controller = cache[state.name].controller
  else scope = $controller(state.controller, ctrlOptions);

  #compile 
  link = $compile(element);

  return link(scope);
}

I tried to create a ui-router plugin for this with a little ui-router modification. I modified ui-router to use own service for creating scope and controller. Here is the diff .
Here is jsbin playground with changed ui-router and plugin implementation. Unfortunately it doesnt work. It does display each state first time. When state is entered again, scope and controller are returned from cache, but the template doesnt get compiled and Im not sure why :(.

I thought this might be alternative to sticky-states but not sure how to fix this. I think the problem is with scope not being handled properly by ui-router. I tried to suppress $destroy event but it doesnt work anyway. :(

[nandakumar531]

Hello @christopherthielen ,

we are also getting the same issue where @buksy90 got.

using ng1 (1.6.1) + [email protected]+ uirouter/[email protected] + uirouter/[email protected] + uirouter/[email protected]

In different scenarios, the stickiness is failing.

1. Same as @buksy90 mentioned.
2. Here is another example
   three tabs used in the above example. home, about and deepnest. The deepnest tab is decorated with sticky: true . Between home and about tabs the state transition is working fine because there is no stickiness is applied. But when user clicks the deepnest tab and come back to home or about tabs, transitions returns "success" but deepnest view is showing. The about or home view is not updating.

With ui-router-extras the sticky state functionality working fine. But when we upgrade it to latest uirouter/[email protected] then we are facing the above issues. Even I checked with all the ui-router latest versions the same issue persists.

Are these issues addressed in coming versions?

[nandakumar531]

@buksy90 is this issue resolved to you?

[buksy90]

Hello @nandakumar531, no I havent found any solution yet.

@christopherthielen could you please share any info on whether this functionality has been ever considered? If so, what is the reasons it hasn't been implemented?

[SadhanaNukala]

@christopherthielen Can you please let us know when this issue will be fixed.
attaching the above example which @buksy90 mentioned again for reference : http://jsbin.com/lohasefoza/5/edit?js,output

[xDisfigure]

I'm not sure but check this out : DeepStateRedirect in ui-router extra plugins maybe that will solve your problem

My issue is quite similar.

We have sticky on moduleA.home, from there url to moduleA.something won't navigate. The controller of something is not even fired. Note that moduleA is just an abstract state.

• deepStateRedirect = true won't help.
• remove sticky make things work smoothly.

p/s : guys , have u found any solutions

[joniruokamo]

This is bugging me as well. Any solution in sight?

[christopherthielen]

This behavior is working as designed and isn't going to change. As mentioned by @soroushNeshat in #24 (comment) and in the documentation,

The sticky state's view must have its own unique ui-view (not shared by other states). Create and target a named ui-view.

This limitation is by design and can't be changed. Proposed work arounds such as trying to save and restore components manually would be prone to many edge cases and is not something I'm willing to support. Further, those solutions would only work for one framework (i.e., AngularJS) where as the sticky states approach works for all frameworks (i.e., React, Angular, AngularJS)

So, the answer to this issue is: use named ui-view and target the named ui-view in the sticky state. Show and hide the ui-view when the state is active/inactive.