提问



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


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

最佳参考


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


从文档:



  ngCloak指令用于防止Angular html模板
  从浏览器中原始显示(未编译)
  在您的应用程序加载时表单。使用此指令可以避免
  由html模板显示引起的不良闪烁效应。

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


其它参考1


此外,您可以使用<span ng-bind="hello"></span>而不是{{hello}}


http://jsfiddle.net/4LhN9/34/[16]

其它参考2


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


.ng-cloak { display:none; }

其它参考3


只需将隐藏的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本身被加载之前工作。[17]


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

其它参考4


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


而已!

其它参考5


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

其它参考6


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