AngularJS 策略来防止类的无样式内容闪现答案

【问题标题】：AngularJS strategy to prevent flash-of-unstyled-content for a classAngularJS 策略来防止类的无样式内容闪现
【发布时间】：2013-04-11 01:54:00
【问题描述】：

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

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

我希望它在页面加载时成为“登录”。有什么策略吗？还是我只需要捏造它并将其加载为“登录”并手动使用 javascript 来调整这个实例的 DOM。

【问题讨论】：

使用 ng-cloak 指令查看这篇文章！ deansofer.com/posts/view/14/…。如果你把它放在 body 上，它会隐藏所有页面，直到每个 {{}} 标签都被解析。
请给出答案。

标签： javascript dom angularjs interpolation fouc

【解决方案1】：

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

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

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

编辑：
根据文档，建议将下面的 sn-p 放入您的 CSS 文件中。

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

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

【讨论】：

这是否会导致 Googlebot 不索引内部内容或惩罚网站伪装？
@PrathanThananart 如果您的大部分内容是异步加载的，那么可见与否我认为您不会获得太多索引价值。除非 Google JS 抓取变得更加智能！
尽管使用了这种官方方式，但我确实得到了闪光。有时甚至两次...the solution below (styling first, angular undiding only there&then) 工作更可靠恕我直言...
@FrankN，文档已更新，提到将 ng-cloak display none 放入 css。谢谢，将编辑我的答案。

【解决方案2】：

您应该使用 ng-class

而不是使用类

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

【讨论】：

似乎还需要ng-cloak

【解决方案3】：

您面临的一个问题是，在 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

【讨论】：

你不能直接省略类并做[ng-cloak] { display... }吗？
@ZachL，我不确定我是否理解这个问题。如果您的意思是“为什么不将 display:none 作为内联样式？”，将 display:none 放在内联样式上的问题是它将具有高优先级并且不会被 ng-cloak 删除或 ng-show/ng-hide。这意味着该元素将保持隐藏状态，除非您编写额外的内容从内联样式中删除 display:none。
嘿@Nicholas，我建议您也许可以省略ng-cloak 类，并使用attribute selector 通过ng-cloak 属性选择元素。我无法用ng-cloak 解决我自己的特定问题（无论如何解决），所以无法确认这是否真的有效。
这样的属性样式似乎是可行的。或者您可以跳过该属性而只使用该类：CSS .ng-cloak { display: none !important; } 和 HTML <body class="ng-cloak">stuff</body>。
非常适合我。注意：不一定是身体标签。适用于任何标签，例如：<div class="row ng-cloak" ng-cloak>

【解决方案4】：

在纯 CSS 中有一个解决 flash 问题的方法，它是防弹的。为您的应用程序根元素的类添加以下内容。此解决方案按处理顺序工作：所有内容都隐藏在 CSS 中，加载 angular，然后 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>

【讨论】：

这是我找到的最简单和最好的解决方案。 :) 谢谢你，mbokil！

【解决方案5】：

我注意到有时甚至 ng-cloak 似乎也不起作用。也许我做错了什么。

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

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

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

【讨论】：