16

我有一些 HTML 像

<p class="noresults">{{numberOfContacts}} Results Are Available</p>

{{numberOfContacts}}在加载 Angular 之前，我可以隐藏吗？所以它只会说Results Are Available

我似乎有一些解决方案，例如在 Angular 加载之前隐藏整个身体，但如果可能的话，我宁愿不这样做。

4

5 回答 5

32

是的，使用ng-cloak。只需将class="ng-cloak"或添加ng-cloak到这样的元素

使用指令<div ng-cloak></div>

使用类<div class="ng-cloak"></div>

它只是一组 CSS 规则，display: none !important当 Angular 渲染你的 DOM 时，它会移除 ng-cloak，因此元素是可见的。

于 2014-02-25T09:37:57.217 回答
9

使用<span ng-bind="numberOfContacts" />而不是 {{numberOfContacts}}

于 2015-11-30T21:33:24.620 回答
2

有时，即使我使用了ng-cloak，我仍然可以看到几秒钟的牙套。添加以下样式解决了我的问题：

[ng-cloak]
{
  display: none !important;
}

有关更多说明，请参阅此链接链接。

希望它有所帮助：D

于 2016-06-26T13:00:25.483 回答
1

这通常只是在非常慢的设备上处理复杂内容时才会出现的问题。在这些情况下，当 AngularJS 解析 HTML、准备和处理指令时，浏览器可能会在文档中显示 HTML 的短暂时刻。在此时间间隔内，您定义的任何内联模板表达式将对用户可见。现在大多数设备都有相当不错的浏览器，它们的速度足够快，可以防止这个问题成为问题。有两种方法可以解决问题。

  1. 避免使用内联模板表达式并坚持使用 ng-bind 指令。
  2. （最佳）使用 ng-cloak 指令隐藏内容，直到 Angular 完成处理。基本上，ng-cloak 指令使用 CSS 来隐藏元素，并且 angular 在处理完内容后删除 CSS 类，确保用户永远不会看到模板表达式的 {{ 和 }} 字符。要考虑的一种策略是将 ng-cloak 直接用于 body 元素，这将确保用户在加载 AngularJS 时看到一个空的浏览器。但是，您可以通过将其应用于存在内联表达式的文档部分来更具体。

我已经看到 ng-cloak 在添加到元素时无法正常工作的问题。过去，我通过简单地将 ng-cloak 类添加到元素来解决这个问题。

于 2017-01-25T18:05:29.637 回答
0

您可以使用 ng-bind 代替表达式

<span ng-bind="data"></span>
于 2016-11-09T08:51:52.033 回答