Question

我有一些像

这样的HTML

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

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

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

Answer 1

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

即可

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

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

它只是一组带有display: none !important的CSS规则，而Angular已经渲染了你的DOM，它删除了ng-cloak，因此元素是可见的。

Answer 2

使用<span ng-bind="numberOfContacts" />代替{{numberOfContacts}}

Answer 3

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

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

有关详细说明，请参阅此链接link。

希望它有所帮助：D

Answer 4

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

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

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

Answer 5

您可以使用ng-bind而不是像

这样的表达式

CREATE TRIGGER triggerinsert
  Before INSERT
  ON rdpr
  FOR EACH ROW
  EXECUTE PROCEDURE function_update();

在加载javascript之前隐藏Angular括号

5 个答案: