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

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

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

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

从文档中可以看到:

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

2012-10-12 20:38:23

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

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

2012-10-12 20:49:19

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

.ng-cloak { display:none; }

2013-07-28 08:30:59

只需将隐形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-06 04:40:50

在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-05 05:12:26

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

2015-11-07 19:24:55

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

2016-12-27 10:54:06

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

推荐文章

标签

最新文章