298

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

是否有一个常见的原因会发生这种情况，这表明我做错了什么，或者是否有已知的方法可以防止这种情况发生？

4

7 回答 7

284

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

从文档中：

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

该指令可以应用于<body>元素，但首选用法是将多个ngCloak 指令应用于页面的一小部分，以允许渐进式呈现浏览器视图

于 2012-10-12T20:38:23.033 回答
200

此外，您可以使用<span ng-bind="hello"></span>而不是{{hello}}.

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

于 2012-10-12T20:49:19.220 回答
51

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

.ng-cloak { display:none; }
于 2013-07-28T08:30:59.710 回答
40

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

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

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

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

于 2014-06-06T04:40:50.227 回答
21

在您的 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>

而已！

于 2015-02-05T05:12:26.857 回答
6

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

于 2015-11-07T19:24:55.653 回答
3

我同意@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>
于 2016-12-27T10:54:06.843 回答