Multiple nested states navigation loading issue (because of caching ?)

ionic-v1
1

Hey guys !

So I’ve put up a very simple Codepen (very minimal code to expose the issue). See it here : http://codepen.io/JerryBels/pen/vEZjxW

To reproduce, follow :

  • Click “Go to first nested”
  • Click “Next” on the right
  • Click “Go to main” on the top
  • Click again “Go to first nested”

There you can see the issue. Basically, the second nested state appears for a moment before the first nested state is transitionned to. I have no idea how to avoid that. I think it makes sense that would be because of caching the view, the last state of the view was the second nested so… But I don’t want to lose the caching abilities.

Thanks ahead for any help !

(Topic related to Nested state direct navigation - load before display ? Or something else? )

3

Well this is working as expected when you think about it.

What it boils down to is that is that the states should be setup differently, or maybe think about using the tabs UI.

Handling multiple states in that manner becomes a bit of a juggling act to main what state your are animating to/from, what’s the state leaving (which is causing the odd animation issue you’re seeing).

4

Hey Mike, thanks for your help, as always it’s very kind of you to be here for the community :smile:

Well, you’re right, it does what is expected. I thought about using the tabs UI but didn’t really try it, as I need the output to be a bit different of what the tabs UI currently offers. If, as it looks the case from your message, there is no easy workaround (by interacting with the view before loading, or something like that, but I have no idea how…) I could try adapting the tabs UI to my needs with CSS and see how it goes…

5

I think the tabs won’t do for me… So I guess my only solution is to add cache-view=“false” for the view, since it looks impossible to fix the state before transition occurs :’(

Also, I would like to report that in a case like that, the first transition from the main state to the “first nested” has a black background… Must be related to this : Brief black screen during navigation

6

Okay, tried the tabs using states - it’s not that good to me because it has no transitionning… And I can achieve the same using simply :

$ionicHistory.nextViewOptions({
    disableAnimate: true,
    disableBack: true,
    historyRoot: true
});

$state.go("wanted.state");

Like this it works also with the code I provided, but I have no transition either, which is unfortunate, but better than the visual bug I had. Adding more options to that “next view options” handler could be a way to achieve this (and other goals).