Angular JS 初始化时页面闪现表达式{{express}}问题

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

  1. 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移除。

  2. ng-cloak
    如果方法1还是不能解决此问题,则可通过在需要的地方加上ng-cloak指令,此时angular将带有ng-cloak的元素设置为diaplay:none隐藏掉,等到angular解析到带有ng-cloak的节点时,会把attribute和class同时remove掉,这样就可实现防止节点的闪现。
    如下代码在IE浏览器中更保险。


Hello {{ name }}

你可能感兴趣的:(Angular JS 初始化时页面闪现表达式{{express}}问题)