Javascript 加载页面时会出现ng中的html元素

在我的页面上，如果有许多脚本要加载，即页面未完全加载，则在ng中有一个div。该div是可见的。如何隐藏它，除非页面/角度已完全加载

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

菜单项1


菜单项2

这是一个猜测，因为您只提供了一个小的代码片段，但我猜测控制器尚未初始化（在引擎盖下，angular将通过HTML DOM进行解析，并在调用它时相应地执行操作。）

如果您使用简单的路线，这将完全防止这种情况

---

或者，您可以将所有ng if条件放置为css显示：无；然后，在应用程序完成加载后，对所有这些应用程序进行迭代

查看文档以了解更多信息

从文件中：

NgClope指令用于防止角度html模板 从浏览器在其原始（未编译）状态下短暂显示 窗体，而您的应用程序正在加载。使用此指令可避免 html模板显示引起的不希望出现的闪烁效果

此外：

该指令可应用于元素，但首选 其用途是将多个ngclope指令应用于 页面以允许渐进呈现浏览器视图

如果您没有在文档的头部加载angular，那么您可以手动将样式添加到头部，并且所有内容仍然有效。加上

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

[ng \：斗篷]，[ng斗篷]，[data ng斗篷]，[x-ng-斗篷]，.ng斗篷，.x-ng-斗篷{
显示：无！重要；
}

使用条件运算符

<div id="menu" ng-if="someCondition.length > 0 ? true : false">
    <ul class="user-menu">
        <li>
            menu item 1 
        </li>
        <li>
            menu item 2 
        </li>
    </ul>
</div>

菜单项1


菜单项2

ng应用于body元素的斗篷会自动执行您的选择。假设angular实际加载了问题说明页/angular，因此如果angular仍在下载（缓慢的internet连接、未压缩的angular、来自同一CDN的大量其他脚本等，以及本地网络上的测试服务器）然后，ng斗篷将无法运行，直到下载并解析angular引导之后。使用简单路由将是（imho）最干净的方法，因为这样，除非所有内容都已初始化，否则无法加载模板，否则手动方法仍然可以工作。如果您在文档头中包含angular.js（推荐），它将自动执行（在angular“运行”之前），这在加载DOM后发生。它完全按照您的建议执行（添加display:none样式，该样式会影响具有ng-斗篷属性的任何元素，然后在angular解析DOM后删除该样式。我的观点是，DOM仍然可以加载，angular.js脚本可能需要相当长的时间才能真正下载（即使它在head标记中））我刚刚在我的机器上打开了未压缩angular.js的源代码，在文件的第22024行之前（在文件中大约764kb之后）不会执行初始化。在angular库完全加载之前，ng斗篷无法执行任何操作（我不是在说app.init，我是在说库引导）再加上一些糟糕的选择，我可以看出这是一个严重的问题。浏览器在脚本（和任何其他元素）之后才会显示任何内容因此，如果angular.js位于页面的头部，ng-Clope将始终按照预期工作，就像头部部分的样式表或样式元素一样。如果不是这样，即使是您的解决方案也不会工作，因为样式表和您的显示很有可能是：none不会在DOM开始渲染时已下载。

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

<div id="menu" ng-if="someCondition.length > 0 ? true : false">
    <ul class="user-menu">
        <li>
            menu item 1 
        </li>
        <li>
            menu item 2 
        </li>
    </ul>
</div>