Question

我有一个AngularJS项目，我想在页面加载类名时阻止FOUC。我读过有关ng-template的内容，但这似乎只适用于标记内的内容。

<body class="{{ bodyClass }}">

我希望它在页面加载时“登录”。对此有何策略？或者我只需要捏造它并将其加载为“登录”并手动使用javascript来调整此实例的DOM。

Answer 1

您要找的是ng-cloak 你必须像这样添加它：

<body class="{{ bodyClass }}" ng-cloak>

这样可以防止不必要的闪烁 Link to docs about this.

编辑：
根据文档，建议将下面的代码段放入CSS文件中。

“为获得最佳效果，必须在头部加载angular.js脚本 html文档的一部分;或者，上面的css规则必须包含在应用程序的外部样式表中。“

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

Answer 2

您遇到的一个问题是，在AngularJS加载并开始操作DOM之前，浏览器将显示<body>元素。其他人对ng-class所说的是正确的，它会做正确的类申请，但在Angular准备好之前你仍然不需要显示任何内容。

在以前版本的Angular中你可以这样做：

<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">

在最近的版本中，这不起作用，因为ng-show通过添加和删除ng-hide类（其特定于元素属性）来实现其可见性

我最近一直在做的是：

<head>
...
    <style> <!-- Or you could include this in an existing style sheet -->
        .ng-cloak {
            display: none !important;
        }
    </style>    
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">

这样做意味着<body>类的样式会立即隐藏ng-cloak。当Angular启动时，它将处理包含ng-class和ng-cloak的所有指令，因此您的<body>元素将具有正确的类并且可见。

在此处阅读更多ng-cloak directive

Answer 3

普通CSS中的闪存问题有一个解决方案，它是防弹的。对于app根元素的类，添加以下内容。此解决方案按处理顺序工作：一切都隐藏在CSS中，角度加载，然后CSS显示应用程序根目录。我喜欢使用它，所以如果页面上还有其他非角度元素，它们将首先渲染，使页面看起来加载速度更快。

/* in your CSS file in head */
.myApp {
    display:none;
}

<div class="myApp" ng-app="myApp"></div>

在正文结束之前添加脚本引用和一些内联CSS：

<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
    display:block;
}
</style>
</body>

Answer 4

您应该使用 ng-class

，而不是使用类

<body ng-class="{{ bodyClass }}">

Answer 5

我注意到有时甚至ng-cloak似乎并没有真正发挥作用。也许我做错了什么。

<body ng-cloak class="{{ bodyClass }}">

我还做了一个类似于@mbokil的小东西，你可以默认隐藏元素。通过使用属性选择器定位具有属性ng-cloak的任何元素，您可以使用角度指令。这有几个好处，但主要的好处是一旦角火，它就会删除这个触发重绘的属性。

<style>
  [ng-cloak] {
    display:none;
  }
</style>

AngularJS策略，以防止类的内容闪现内容

5 个答案: