Angular JS 初始化时页面闪现表达式{{express}}问题-优快云博客

本文链接：https://blog.youkuaiyun.com/mayuan2011/article/details/83379882

探讨了AngularJS中使用ng-show导致的页面元素闪现现象，解释了其发生原因，并提供了两种有效解决方法：使用ng-if替代ng-show，以及利用ng-cloak指令隐藏元素直到AngularJS完全加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#问题
使用ng-show展示的图片和变量值，在页面初始化、刷新的时候会闪现一次，然后才会隐藏。
#原因
Angular JS需要在DOM加载完和JavaScript加载完后才会Angular JS的触发绑定和渲染工作，即：在加载Angular JS之前会先渲染DOM结构和JS，而模态框涉及到了DOM操作，所以会在Angular JS还没加载完，DOM已经加载完后出现。等Angular JS加载完成后就会执行ng-show，展示或隐藏。这样就出现了闪现。
#解决方法

ng-if
ng-show在页面进行渲染的时候，已经将该元素加载，如果值为false，元素需要隐藏，从浏览器可以查看出此时渲染出来的元素仅仅是加了一个ng-hide的class，以此来控制元素的现实与否。
注意的是，如果是false，nf-show指令并没有从DOM中移除元素。
ng-if在页面渲染的时候，如果值为false，是不会将元素加载出来的，如果值改变为true，则通过操作DOM的方式动态添加元素。
注意的是，ng-if如果是通过document或者jquery等方式获取元素进行操作的话可能获取不到。如果是false，ng-if指令所在的元素开始标签到结束标签之间的部分会从DOM移除。
ng-cloak
如果方法1还是不能解决此问题，则可通过在需要的地方加上ng-cloak指令，此时angular将带有ng-cloak的元素设置为diaplay:none隐藏掉，等到angular解析到带有ng-cloak的节点时，会把attribute和class同时remove掉，这样就可实现防止节点的闪现。
如下代码在IE浏览器中更保险。

<style>
.ng-cloak{
display:none;
}
</style>
<div ng-cloak class="ng-cloak">
  <h1>Hello {{ name }}</h1>
</div>