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

Question

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

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

在 style 标签中将 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;
}