54

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

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

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

4

5 回答 5

79

您正在寻找的是ng-cloak.
您必须像这样添加它： 

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

这将防止不必要的闪烁。
链接到有关此的文档。

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

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

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
于 2013-04-18T06:13:47.307 回答
23

您面临的问题之一是浏览器将<body>在 AngularJS 加载并开始操作 DOM 之前显示元素。其他人所说的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 启动时，它会处理所有的指令 includeng-class和ng-cloak，所以你的<body>元素将拥有正确的类并且是可见的。

在这里阅读更多ng-cloak 指令

于 2014-03-19T21:06:48.027 回答
6

纯 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>
于 2015-05-23T02:46:58.400 回答
3

而不是使用类，你应该使用ng-class

<body ng-class="{{ bodyClass }}">
于 2013-10-30T09:07:48.027 回答
1

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

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

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

<style>
  [ng-cloak] {
    display:none;
  }
</style>
于 2015-08-26T15:41:00.163 回答