关于angularjs：防止双重花括号表示法在angular.js编译/插入文档之前暂时显示

Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document

这似乎主要是IE中的一个问题，当有许多图像/脚本需要加载时，标记中的文字{{stringExpression}}可能会显示很长一段时间，然后在完成文档的编译/插入后，角度消失。

是否有一个共同的原因会发生这种情况，这表明我做了一些普遍错误的事情，或者有一个已知的方法来防止这种情况发生？

我认为您正在寻找ngCloak指令：https://docs.angularjs.org/api/ng/directive/ngcoat

从文档中：

The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.

The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak
directives to small portions of the page to permit progressive rendering of the browser view

相关讨论

另外，您可以使用而不是{{hello}}。

http://jsfiddle.net/4lhn9/34/

相关讨论

为了提高最后加载脚本时class='ng-coat'方法的有效性，请确保在文档头中加载以下CSS：

1	.ng-cloak { display:none; }

相关讨论

只需将隐藏的CSS添加到页面头部或某个CSS文件：

1
2
3

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

然后您可以根据正常的角度实践使用ngcoat指令，它甚至在角度本身加载之前也会工作。

这正是Angular所做的：Angular.js末尾的代码将上述CSS规则添加到页面的头部。

相关讨论

在CSS中添加以下内容

1
2
3

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

然后在代码中可以添加ng coat指令。例如，

1	Welcome {{data.name}}

就是这样！

相关讨论

您也可以使用ng-attr-src="{{variable}}"而不是src="{{variable}}"，并且只有在编译器编译模板之后才会生成该属性。这在文档中提到：https://docs.angularjs.org/guide/directive-ngattr属性绑定

相关讨论

我同意@pkozlowski.opensource的回答，但ng clock类不适合我使用ng repeat。因此，我建议您使用类来表示简单的分隔符表达式，如name和ngcoat指令来表示ng repeat。

和

1 2	<li ng-repeat="item in items" ng-cloak>{{item.name}} <li>

相关讨论