2

In my current app there are quite some complex calculations to do after $routeChangeSuccess before the new page is really fully shown. This causes a bit of "flickering" as the content changes position and size. I'm already preloading the needed JSON and images before the route changes (via resolve in the $routeProvider).
My idea to prevent this is to stop ngView from deleting the old content before the new one gets inserted. Instead I want to insert the new content with display:none set, so the newly compiled directives can execute their linking procedures while the old route content is still showing. After this is all finished, the old content would be deleted and the new content would be displayed which would happen instantly with no flickering.

Is there a way to do this? I didn't find any option in the docs or in google where you could define such a behaviour. The only option I see now is a custom build of ngRoute where I change the ngViewFactory to my needs. But I don't really like that idea as this will be stressful when I want to upgrade my angular version etc. Maybe there's a better way?

Felix Engelmann
  • 399
  • 5
  • 17
  • 2
    you might try `ngCloak` in one of it's many variations... https://docs.angularjs.org/api/ng/directive/ngCloak – Claies Sep 16 '15 at 14:51
  • good idea, that solved parts, but there's still that moment after the old content got deleted and the `ng-cloak`s got removed. in my case theres an empty page with navigation and footer showing for a fraction of a second. – Felix Engelmann Sep 16 '15 at 15:18
  • hmm, I've seen some modified forks of the ngCloak directive in the past, I don't know for sure if they work with current angular releases, but I can do a bit of research. In the meantime, you might be able to work out a solution to your case by studying the source of ngCloak..... – Claies Sep 16 '15 at 15:23
  • Why not use `resolve` to do all the "complex calculations" as well? – New Dev Sep 19 '15 at 05:45

0 Answers0