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>

Answer 2

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

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

或者，您可以将所有ng-if条件放在css display：none;然后在应用程序完成加载后遍历所有这些

Answer 3

使用条件运算符。

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

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

3 个答案: