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

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

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

105092 次浏览
小开
最佳答案

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

从文档中可以看到:

ngCloak指令用于阻止Angular的html模板 从浏览器以原始(未编译的)形式简要显示 在应用程序加载时进行表单。使用此指令避免

. HTML模板显示导致的不良闪烁效果 该指令可以应用于<body>元素，但首选的用法是应用多个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指令，它甚至在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指令。 例如,< / p > 
<div ng-cloak>
Welcome \{\{data.name}}
</div>

这就是它!

小开

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

小开

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

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

而且

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

提交答案