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

在我的页面上，如果有许多要加载的脚本(即页面未完全加载)，则在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>

最佳答案

查看ng-cloak的文档。

从文档中:



还:

<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>

关于javascript - ng-if内的html元素在页面加载时出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28403141/