防止双花括号符号在 angular.js 编译/插入文档之前暂时显示

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

从文档中：

ngCloak 指令用于防止 Angular html 模板在加载应用程序时被浏览器以原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。该指令可以应用于 元素，但首选用法是将多个 ngCloak 指令应用于页面的一小部分，以允许渐进式呈现浏览器视图

此外，您可以使用 <span ng-bind="hello"></span> 代替 {{hello}}。

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

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

.ng-cloak { display:none; }

只需将隐藏的 CSS 添加到页面头部或您的 CSS 文件之一：

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

然后您可以按照正常的 Angular 实践使用 ngCloak directive，它甚至可以在 Angular 本身加载之前工作。

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

在您的 CSS 中添加以下内容

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

然后在你的代码中你可以添加 ng-cloak 指令。例如，

<div ng-cloak>
   Welcome {{data.name}}
</div>

而已！

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

我同意@pkozlowski.opensource 的回答，但 ng-clock 类不适用于我与 ng-repeat 一起使用。所以我想推荐你使用简单的分隔符表达式类，比如 {{name}} 和 ng-repeat 的 ngCloak 指令。

<div class="ng-cloak">{{name}}<div>

和

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