Question

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

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

Answer 1

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

来自文档：

ngCloak指令用于阻止Angular html模板   来自浏览器的原始（未编译）短暂显示   在您的应用程序加载时表单。使用此指令可以避免   由html模板显示引起的不良闪烁效应。

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

Answer 2

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

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

Answer 3

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

.ng-cloak { display:none; }

Answer 4

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

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

然后你可以根据正常的角度练习使用ngCloak directive，它甚至可以在Angular本身加载之前工作。

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

Answer 5

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

就是这样！

Answer 6

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

Answer 7

我同意@ pkozlowski.opensource的回答，但ng-clock类对我使用ng-repeat没有用。所以我建议你使用类来表示简单的分隔符表达式，如{{name}}和ngCloak指令，用于ng-repeat。

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

和

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

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

7 个答案: