ng-if中的html元素在页面加载时出现

Question

在我的页面上我有一个div内部ng - 如果有多个脚本要加载,即当页面没有完全加载时.div是可见的.除非页面/角度已满载,否则如何隐藏它.

<div  id = "menu"  ng-if="someCondition" >
    <ul class="user-menu">
        <li>
            menu item 1 
        </li>
        <li>
            menu item 2 
        </li>
    </ul>
</div>

Answer 1

看看ng-cloak的文档.

从文档:

ngCloak指令用于防止浏览器在加载应用程序时以原始(未编译)形式短暂显示Angular html模板.使用此指令可避免html模板显示导致的不良闪烁效应.

也:

该指令可以应用于元素,但首选用法是将多个ngCloak指令应用于页面的一小部分,以允许逐步呈现浏览器视图.

<div  id = "menu"  ng-if="someCondition" ng-cloak>
    <ul class="user-menu">
        <li>
            menu item 1 
        </li>
        <li>
            menu item 2 
        </li>
     </ul>
 </div>

这个怎么运作:

加载angular.js时,以下样式将应用于文档(angular.js文件基本上充当.css文件)(建议将其放在页面的头部).当角度实际上在DOM负载上运行时,它会删除ng-cloak属性,隐藏元素.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

如果您没有在文档的头部加载角度,那么您可以手动将样式添加到头部,一切都将仍然有效.只需添加

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
</style>