防止双花括号标记在角之前显示。js编译/插入文档

It seems to be primarily an issue in IE when there is a number of images/scripts to load, there can be a good amount of time where the literal {{stringExpression}} in the markup are displayed, then disappear once angular is done with it's compilation/interpolation of the document.

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

Is there a common reason why this would happen which would indicate I'm doing something generally wrong, or is there a known way to prevent this?

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

7 个解决方案

#1

272

I think that you are looking for the ngCloak directive: https://docs.angularjs.org/api/ng/directive/ngCloak

我认为您正在寻找ng斗篷指示:https://docs.angularjs.org/api/ng/directive/ng斗篷。

From the documentation:

从文档:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

ng斗篷指令用于防止浏览器在加载应用程序时以原始(未编译)形式简要显示角html模板。使用此指令可避免html模板显示引起的不希望的闪烁效果。

The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view

该指令可应用于元素，但首选的用法是将多个ng指令应用于页面的一小部分，以允许对浏览器视图进行渐进式呈现。

#2

191

Also, you can use <span ng-bind="hello"></span> instead of {{hello}}.

另外，您可以使用，而不是{{hello}}。

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

#3

To improve the effectiveness of class='ng-cloak' approach when scripts are loaded last, make sure the following css is loaded in the head of the document:

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

.ng-cloak { display:none; }

#4

Just add the cloaking CSS to the head of the page or to one of your CSS files:

只需将隐藏的CSS添加到页面头部或CSS文件中:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}

Then you can use the ngCloak directive according to normal Angular practice, and it will work even before Angular itself is loaded.

然后你可以根据正常的角度练习使用ng斗篷指令，它甚至可以在角度本身被加载之前工作。

This is exactly what Angular does: the code at the end of angular.js adds the above CSS rules to the head of the page.

这就是角函数的作用:角函数末尾的代码。js将上面的CSS规则添加到页面的头部。

#5

In your css add folllowing

在css中添加以下内容

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }

And then in you code you can add ng-cloak directive. For example,

然后在你的代码中你可以添加ng-隐身指令。例如,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Thats it!

这就是它!

#6

You also can use ng-attr-src="{{variable}}" instead of src="{{variable}}" and the attribute will only be generated once the compiler compiled the templates. This is mentioned here in the documentation: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

您还可以使用ng-attr-src=“{{{变量}”而不是src=“{{变量}”，并且只有在编译器编译模板之后才会生成属性。文档中提到了这一点:https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

#7

I agree with @pkozlowski.opensource answer, but ng-clock class did't work for me for using with ng-repeat. so I would like to recommend you to use class for simple delimiter expression like {{name}} and ngCloak directive for ng-repeat.

我同意@pkozlowski。opensource的答案，但是ng-clock类对我使用ng-repeat不起作用。因此，我建议您将类用于简单的分隔符表达式，如{{{name}和ng斗篷指令用于ng-repeat。

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

and

和

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

#1

272