ui-view duplicated temporarily during initial page load

[jeffwhelpley]

My server will fill in some content within the ui-view just so users see something while the view is being loaded. I noticed that the ui-view div is being duplicated while the view is loaded and then once it is fully loaded one of the ui-view divs is destroyed. So, ultimately there is only one ui-view and it contains the right thing, but the issue is that by duplicating the ui-view div temporarily it causes a number of issues with some stuff I am trying to do with the initial load.

So, is there any way to use ui-views without this element duplication? Is it a bug or just the way the ui router works?

I am using 0.2.10. I tried downloading the latest from the github repo and using that to no avail. When I go back to use 0.2.7, there is no temporary ui-view duplication and things work fine.

[fabiosussetto]

I can confirm the same exact behaviour, it's something that has been introduced for me in 0.2.8. If I use 0.2.7 the issue doesn't occur.

[nateabele]

Plunkr?

[snekbaev]

Dup of #881 ?

[nateabele]

Looks like yes.

[jeffwhelpley]

@nateabele, #881 is not the same. I have finally managed to get a plunkr working to replicate the problem and it appears that the issue has to do with the presence of ngAnimate. Check this out:

http://plnkr.co/edit/cIl5EJ?p=preview

You will need to debug the preview in a separate window in Chrome and set a breakpoint on line 12. When you do this, you will clearly see that 2 ui-views are temporarily created. I have not been able to figure out where exactly in the uiViewDirective code there may be an issue, but I have noticed that there is quite a bit of ngAnimate logic in there.

[snekbaev]

@jeffwhelpley, I do use animation too and I have issue #881 in my project, also user @artem1 mentions the animation fix there too, so maybe these issues have common problem...

[jeffwhelpley]

@snekbaev hmm, you may be right. I was focusing on the initial post and my symptoms where different, but based on the other comments we may be at the very least talking about a similar root cause.

[ejensler]

I am having this exact same behavior too, using ngAnimate. This is fine and necessary in the cases where you need to transition between two ui-views using an animation. However, in the case where you need to transition to child state that has its own controller, the ui-view is duplicated, and thus the controller is instantiated twice. This behavior happens even in the case where no ngAnimate transition is called for the ui-views, as well as in the case where you are transitioning between named ui-views. The instantiation of the controller twice for me is the actual undesirable behavior.

[wylieconlon]

I think I've run into this issue as well. It's particularly hard to create a test case because the presence of ngAnimate is what triggers it, even though I didn't enable animation for state changes. For me, the undesirable behavior is that $destroy is now called twice on controllers, but only once on link functions.

[eddiemonge]

https://gist.github.com/eddiemonge/f6a58169c2846731a1eb

[PostImpatica]

I resolved this by adding the following to my run config:

   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
       $animate.enabled(false);
   });

[tienvx]

@helzgate It works for me, thanks you so much!