AngularJS 使用 angular-css 防止 Flash 无样式内容 (FOUC)

Question

当我单击链接时，我目前正在使用 angular-css 在 head 标记中动态注入 css，但我看到一闪而过的无样式内容。如果我将css放在login.html文件中，我就没有这个问题。我尝试在整个 login.html 文件中添加 ng-cloak，但它不起作用（但 ng-cloak 在第一次加载时可以正常工作）。

有没有一种方法可以在没有 FOUC 的情况下使用 angularJS 和 angular-css 动态加载 css ？

在样式标签中将 css 放在 html 之上是一种不好的做法吗？这可以解决问题并减少浏览器发出的请求数。

谢谢！

Answer 1

您应该能够通过使用 ng-cloak 并将以下内容添加到您的 index.html 文件来修复它

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