angularjs中ng-if导致闪屏

问题现象

页面中存在两个互斥的 INPUT, 都使用 ng-if进行显示判断,同时只显示一个。

<button ng-click="refresh()" ng-show="testIf==true" class="btn brand-btn-color-a btn-refresh">刷新1</button>
<button ng-click="refresh()" ng-show="testIf==false" class="btn brand-btn-color-a btn-refresh">导出2</button>
<button  ng-click="exportCloudDetail()" ng-if="showByVersion()" has-permission="PRIV_REPORT_MANAGE" class="btn brand-btn-color-a">导出</button>

当这段代码在一个比较简单的页面中时,点击导出按钮,刷新1按钮和导出2按钮可以正常切换。当在一个比较大的项目中时这个切换过程会出有两个按钮同时出现的短暂瞬间

解决方法

只用一个按钮,需要切换时只切换内部的功能,不做界面上的切换


总结

在页面中,界面的变化会涉及DOM的变化,然后浏览器进行渲染。这个过程相对来说是比较慢的。因此在处理时,尽量做功能上的处理,不改变界面的渲染。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章