Angularjs ng-switch 是否可以不重新渲染视图?
Is it possible to Angularjs ng-switch does not re render view?
在我网站的某些页面中,我在 ng-switch 中有一些指令,如下所示:
<div ng-switch="contentMenuObj.model">
<div ng-switch-when="calendar">
// Some directive
</div>
<div ng-switch-when="history">
// Some directive
</div>
</div>
每次我更改 "view"(日历到历史记录)并返回(历史记录到日历)时,angular 都会重新呈现日历视图并在服务器中进行新查询。
我的问题是关于这种行为,是否可以 angular 不重新呈现视图?如果不可能,解决这个问题的最佳方法是什么?
如果我没理解错的话。您不想在 contentMenuObj.model 更改时重新呈现视图 - 对吗?如果是这样,请应用一种方式绑定
<div ng-switch="::contentMenuObj.model">
<div ng-switch-when="calendar">
// Some directive
</div>
<div ng-switch-when="history">
// Some directive
</div>
</div>
这种情况下的模型只会加载一次。
或者如果您只想加载指令一次,请尝试使用 ng-show / ng-hide 指令。
<div ng-show="contentMenuObj.model == 'calendar'">
// Some directive
</div>
<div ng-show="contentMenuObj.model == 'history'">
// Some directive
</div>
Angular 重新渲染你的指令,因为 ng-switch remove div when ng-switch-when
condition is not satisfied,这使得指令被销毁,下次必须重新渲染。
与ng-switch
指令相比,ng-show
指令不删除元素,而仅隐藏。
因此,如果您想在不重新呈现的情况下隐藏和显示内容,请尝试:
<div>
<div ng-show="contentMenuObj.model === 'calendar'">
// Some directive
</div>
<div ng-show="contentMenuObj.model === 'history'">
// Some directive
</div>
</div>
在我网站的某些页面中,我在 ng-switch 中有一些指令,如下所示:
<div ng-switch="contentMenuObj.model">
<div ng-switch-when="calendar">
// Some directive
</div>
<div ng-switch-when="history">
// Some directive
</div>
</div>
每次我更改 "view"(日历到历史记录)并返回(历史记录到日历)时,angular 都会重新呈现日历视图并在服务器中进行新查询。
我的问题是关于这种行为,是否可以 angular 不重新呈现视图?如果不可能,解决这个问题的最佳方法是什么?
如果我没理解错的话。您不想在 contentMenuObj.model 更改时重新呈现视图 - 对吗?如果是这样,请应用一种方式绑定
<div ng-switch="::contentMenuObj.model">
<div ng-switch-when="calendar">
// Some directive
</div>
<div ng-switch-when="history">
// Some directive
</div>
</div>
这种情况下的模型只会加载一次。
或者如果您只想加载指令一次,请尝试使用 ng-show / ng-hide 指令。
<div ng-show="contentMenuObj.model == 'calendar'">
// Some directive
</div>
<div ng-show="contentMenuObj.model == 'history'">
// Some directive
</div>
Angular 重新渲染你的指令,因为 ng-switch remove div when ng-switch-when
condition is not satisfied,这使得指令被销毁,下次必须重新渲染。
与ng-switch
指令相比,ng-show
指令不删除元素,而仅隐藏。
因此,如果您想在不重新呈现的情况下隐藏和显示内容,请尝试:
<div>
<div ng-show="contentMenuObj.model === 'calendar'">
// Some directive
</div>
<div ng-show="contentMenuObj.model === 'history'">
// Some directive
</div>
</div>