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

在IE中，这似乎是一个主要的问题，当有大量的图像/脚本需要加载时，标记中的文字{{stringExpression}}会显示很长一段时间，然后在angular完成对文档的编译/插值后就消失了。

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

当前回答

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

.ng-cloak { display:none; }

其他回答

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

.ng-cloak { display:none; }

我同意@pkozlowski的观点。开源的答案，但ng-clock类不适合我使用ng-repeat。所以我建议你使用class作为简单的分隔符表达式，比如{{name}}， ngCloak指令用于ng-repeat。

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

and

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

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

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

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

就是这样！

只需将隐形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规则添加到页面的头部。

推荐文章