javascript - 如何避免在开始时显示 {{ ... }}？

Question

我正在开发一些简单的 angularjs SPA，我注意到在开始时，不到一秒钟，在{{ ... }}Angularjs 加载数据之前，SPA 中显示了很多。

我怎样才能避免这种行为？

score 3 · Accepted Answer

基本上内容显示为{{}}插值指令，它们只是角度未编译的数据。

您可以ng-cloak在您的身体上使用将具有display: none !importantCSS 的指令，您可以使用此指令作为您需要添加下面给出的 CSS 规则class或与它一起使用。attribute

CSS

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

选择

使用ng-bind将在当前控制器范围内评估表达式的指令。

score 1 · Accepted Answer

使用 ng-bind

最好使用 ngBind 而不是 {{ variable }}，这样可以避免浏览器暂时显示 {{}}。人们使用 {{ variable }} 是因为它不那么冗长且更具可读性。

<div>
      <div ng-bind="name"></div>
</div>

除了 ng-bind，你还可以使用 ng-Cloak。这是文档

score 1 · Accepted Answer

ngCloak指令用于防止 Angular html 模板在加载应用程序时被浏览器以原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。

<body ng-app="yourAppName" ng-controller="yourController as b" class="ng-cloak">

并使用 CSS 样式

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

score 1 · Accepted Answer

我认为 ngCloak 是您正在寻找的东西。

score 1 · Accepted Answer

不要在元素内部进行数据绑定。使用一个属性。该ng-bind属性是您正在寻找的。

所以...

<h1>{{ your.data }}</h1>

会变成

<h1 ng-bind="your.data"></h1>

ng-cloak也可以，但是最好了解两者。