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

AngularJS中解决双大括号闪烁问题

最新推荐文章于 2025-05-28 08:49:35 发布

翻译最新推荐文章于 2025-05-28 08:49:35 发布 · 225 阅读

CC 4.0 BY-SA版权

原文链接：https://oldbug.net/q/rz9L/Prevent-double-curly-brace-notation-from-displaying-momentarily-before-angular-js-compiles-interpolates-document

文章标签：

#angularjs

本文探讨了AngularJS中双大括号表示法在文档加载期间暂时显示的问题，尤其是在IE浏览器中。文章提供了几种解决方案，包括使用ngCloak指令和ng-bind属性，以及如何正确设置CSS以避免页面加载时的闪烁效果。

本文翻译自：Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document

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? 有没有一个共同的原因，为什么会发生这种情况，这表明我做的事情总体上是错误的，或者是否有一种已知的方法来阻止这种情况？

#1楼

参考：https://stackoom.com/question/rz9L/防止双重花括号表示法在angular-js编译-插入文档之前暂时显示

#2楼

I think that you are looking for the ngCloak directive: https://docs.angularjs.org/api/ng/directive/ngCloak 我认为您正在寻找ngCloak指令： https ： ngCloak

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. ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。 Use this directive to avoid the undesirable flicker effect caused by the html template display. 使用此指令可避免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 该指令可以应用于<body>元素，但首选用法是将多个ngCloak指令应用于页面的一小部分，以允许逐步呈现浏览器视图

#3楼

Also, you can use <span ng-bind="hello"></span> instead of {{hello}} . 此外，您可以使用<span ng-bind="hello"></span>而不是{{hello}} 。

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

#4楼

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

.ng-cloak { display:none; }

#5楼

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. 然后你可以根据正常的Angular实践使用ngCloak指令，它甚至可以在加载Angular之前工作。

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. 这正是Angular所做的：angular.js末尾的代码将上述CSS规则添加到页面的头部。

#6楼

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. 然后在你的代码中你可以添加ng-cloak指令。 For example, 例如，

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

Thats it! 而已！