Angular duplicates ng-view every time a route loads

Question

Is it normal that AngularJS creates a new ng-view every time a route loads, and then destroys the previous ng-view ? This is only part of the time, but I see both views in my application, and some directives that collect the top element also notice this behavior (it seems that compilation is done before the original ng-view is removed from the DOM)

Has anyone noticed this behavior?

Answer 1

Yes, this is normal, it allows you to have transitions when replacing the view.

From the official ngView documentation :

enter - animation is used to output new content to the browser. leave - animation is used to animate existing content.

Animation of input and stop occurs simultaneously.

In fact, ngView not the only directive that behaves this way, for example, ngRepeat behaves the same way.

If you want your views to not overlap, you can try this.

Add a class to the ng-view element so you can easily customize it with css, something like this:

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

And then in your css do the following:

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