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)
AngularJS每次加载路径时都会创建一个新的ng-view,然后破坏之前的ng-view,这是正常的?这只是一小部分时间,但我可以看到我的应用程序上的两个视图,并且收集元素top的一些指令也注意到行为(似乎编译是在从DOM中删除原始ng-view之前完成的)
Has someone noticed this behaviour?
有人注意到这种行为吗?
1 个解决方案
#1
3
Yes, it's normal, this allows you to have transitions when the view gets replaced.
是的,这是正常的,这允许您在视图被替换时进行转换。
From the official documentation of ngView:
从ngView的官方文档:
enter - animation is used to bring new content into the browser. leave - animation is used to animate existing content away.
enter - animation用于将新内容带入浏览器。离开 - 动画用于动画现有内容。
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.
实际上ngView并不是唯一一个行为相似的指令,例如ngRepeat的行为完全相同。
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:
在ng-view的元素中添加一个类,以便您可以轻松地从css中定位它,如下所示:
<div ng-view class="your-view"></div>
And then in your css do this:
然后在你的CSS中这样做:
.your-view.ng-leave { display:none; }
#1
3
Yes, it's normal, this allows you to have transitions when the view gets replaced.
是的,这是正常的,这允许您在视图被替换时进行转换。
From the official documentation of ngView:
从ngView的官方文档:
enter - animation is used to bring new content into the browser. leave - animation is used to animate existing content away.
enter - animation用于将新内容带入浏览器。离开 - 动画用于动画现有内容。
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.
实际上ngView并不是唯一一个行为相似的指令,例如ngRepeat的行为完全相同。
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:
在ng-view的元素中添加一个类,以便您可以轻松地从css中定位它,如下所示:
<div ng-view class="your-view"></div>
And then in your css do this:
然后在你的CSS中这样做:
.your-view.ng-leave { display:none; }