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

Question

在我的页面上，当有许多脚本要加载时，即当页面未完全加载时，我在 ng-if 中有一个 div。div 是可见的。除非页面/Angular 已完全加载，否则如何隐藏它。

<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 的文档.

来自文档:

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.

还有:

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.

<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 文件)(建议位于页面的头部)。当 Angular 在 DOM 加载上实际运行时，它会删除 ng-cloak 属性，从而取消隐藏元素。

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

如果您不在文档的头部加载 Angular ，那么您可以手动将样式添加到头部，一切仍然有效。只需添加

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