对于 AngularJS，如果我们使用 ngCloak，我们不应该在 HTML 文件中添加一个 CSS 样式来隐藏元素吗？

Question

如果我们使用 ng-cloak ，但 angular 脚本加载缓慢，或者如果用户关闭了 JavaScript，那么用户是否仍然看不到{{ a + b }}或我们想要隐藏的任何内容？

那么，如果我们添加

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

到我们的 HTML 文件的标题部分？ 或者，如果我们使用的是 AngularJS，并且互联网连接可能很慢或者用户关闭了 JavaScript，那么是否有其他 CSS 样式可能适合添加？

Answer 1

如果你在页面的头部加载 angular.js，那么你不应该自己添加任何 css 让 ng-cloak 正常工作。 Angular 在加载时会自行添加这些样式，并且由于这发生在 head 部分，因此在浏览器评估页面正文并呈现任何内容之前会应用这些样式。

但是，如果您使用脚本加载器异步加载，那么您确实需要手动添加样式（最好是在页面头部加载的样式表或样式块中）。

从文档中：

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

Answer 2

我不

完全确定我是否理解这个问题，但是是的，我相信你说的是有道理的。

ng-cloak与其他指令略有不同，因为它唯一的工作就是删除自身。Angular 不会对该属性应用任何特殊样式。它只是删除它。

这意味着，例如，您可以应用样式使卸载的 Angular 元素具有背景色，而不是不可见。我不知道你为什么要这样做，但这是要记住的——它只是一个无聊的旧属性，直到 Angular 删除它。

加载CSS

文件的行为取决于浏览器，所以在头部放置一个样式标签可能是公平的，但这就像任何其他CSS资源一样 - 你很少希望元素加载没有样式，浏览器在避免这种情况方面非常好。我经常喜欢把它放在脑海里只是为了好衡量，但我可以理解有人不想这样做。但你肯定在某个地方需要它。

如果你禁用了 JavaScript，或者在 Angular 加载之前，它就像任何其他属性一样：

[ng-cloak]{
  display: none
}

<div ng-cloak>
  Where am I?
</div>

但是一旦 Angular 加载（无论设置需要多长时间，在这里由一秒计时器模拟）：

window.setTimeout(function() {
  $("[ng-cloak]").removeAttr("ng-cloak");
}, 1000);

[ng-cloak] {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-cloak>
  Here I am!
</div>