Angular duplicates ng-view every time a route is loaded

Question

It's normal that AngularJS creates a new ng-view every time a route is loaded, and then destroys the previous ng-view? It's just a fraction of time, but I can see both views on my app, and some directives which gather the element top also notice that behaviour (it seems that compilation is done before the original ng-view is removed from the DOM)

Has someone noticed this behaviour?

Answer 1

Yes, it's normal, this allows you to have transitions when the view gets replaced.

From the official documentation of ngView:

enter - animation is used to bring new content into the browser. leave - animation is used to animate existing content away.

The enter and leave animation occur concurrently.

Actually ngView is not the only directive that behaves like that, for instance ngRepeat behaves exactly the same.

If you want to make sure that your views don't overlap, you could try this.

Add a class to the element of the ng-view so that you can easily target it from your css, something like this:

<div ng-view class="your-view"></div>

And then in your css do this:

.your-view.ng-leave { display:none; }