Question

我正在开发一些简单的angularjs SPA，我注意到在开始时，在不到一秒的时间内，SPA会在angularjs加载数据之前显示许多{{ ... }}。

我怎么能避免这种行为？

Answer 1

基本上，内容显示为ng-cloak是插值指令只是有角度的未编译数据。

您可以在身体上使用{{}}指令ng-cloak CSS，您可以将此指令用作display: none !important或class，您需要添加CSS以下规则。

<强> CSS

attribute

<强>替代

使用[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }指令来评估当前控制器范围内的表达式。

Answer 2

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;
}

Answer 3

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

Answer 4

不要在元素内部进行数据绑定。使用属性。 =Sheet!$A$2:INDEX(sheet!$A$2:$A$1048576, MATCH(1e99, $A$2:$A$1048576))属性是您正在寻找的内容。

因此...

ng-bind

将成为

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

<h1 ng-bind="your.data"></h1>也有效，但了解两者都很有用。

Answer 5

使用ng-bind

最好使用ngBind而不是{{variable}}，这样可以避免浏览器暂时显示{{}}。人们使用{{variable}}因为它更简洁，更易读。

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

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