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

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

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

当前回答

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

就是这样！

其他回答

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

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

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

从文档中可以看到:

ngCloak指令用于阻止Angular的html模板从浏览器以原始(未编译的)形式简要显示在应用程序加载时进行表单。使用此指令避免 HTML模板显示引起的不受欢迎的闪烁效果。该指令可以应用于<body>元素，但首选的用法是应用多个ngCloak 指示页面的小部分，以允许渐进式呈现浏览器视图

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

就是这样！

我同意@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>

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

.ng-cloak { display:none; }

推荐文章