javascript ng-if 中的 html 元素在页面加载时出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28403141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html element inside ng-if appear when the page is loading
提问by Hmahwish
On my page I have a div inside ng-if when there is a number of scripts to load ,i.e when the page is not fully loaded.The div is visible. How do I hide it unless page/angular is fully loaded.
在我的页面上，当有许多脚本要加载时，即当页面未完全加载时，我在 ng-if 中有一个 div。该 div 是可见的。除非页面/角度已完全加载，否则如何隐藏它。
<div id = "menu" ng-if="someCondition" >
<ul class="user-menu">
<li>
menu item 1
</li>
<li>
menu item 2
</li>
</ul>
</div>
回答by Joe Enzminger
Take a look at the documentation for ng-cloak.
查看ng-cloak的文档。
From the documentation:
从文档：
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
ngCloak 指令用于防止 Angular html 模板在您的应用程序加载时以原始（未编译）形式被浏览器短暂显示。使用该指令可以避免 html 模板显示导致的不良闪烁效果。
Also:
还：
The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
该指令可以应用于元素，但首选用法是将多个 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>
How it works:
怎么运行的：
The following styles are applied to the document (the angular.js file is essentially acting as a .css file) when angular.js is loaded (which is recommended to be in the head of your page). When angular actually runs on DOM load, it removes the ng-cloak attribute, uncloaking the elements.
加载 angular.js 时（建议将其放在页面的头部），以下样式将应用于文档（angular.js 文件本质上充当 .css 文件）。当 angular 在 DOM 加载时实际运行时，它会删除 ng-cloak 属性，从而取消元素的伪装。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
If you don't load angular in the head of your document, then you can add the styles manually to the head and everything will still work. Just add
如果您没有在文档的头部加载 angular，那么您可以手动将样式添加到头部，一切仍然有效。只需添加
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
回答by Damian Nikodem
This is a guess due to the fact that you only provided a small code snippet but my guess is that the controller is not initialized yet ( under the hood angular will parse through your HTML DOM and act accordingly when it is called. )
这是一个猜测，因为您只提供了一个小代码片段，但我的猜测是控制器尚未初始化（在幕后 angular 将解析您的 HTML DOM 并在调用时采取相应的行动。）
If you use a simple route this would prevent this completely.
如果您使用简单的路线，这将完全防止这种情况。
Alternatively you could place all of your ng-if conditions with a css display:none; and then iterate through all of them once the app has completed loading
或者，您可以使用 css display:none; 放置所有 ng-if 条件。然后在应用程序完成加载后遍历所有这些
回答by squiroid
Use conditional operator.
使用条件运算符。
<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>
