Javascript Angularjs - ng-cloak/ng-show 元素闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11249768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs - ng-cloak/ng-show elements blink
提问by MelkorNemesis
I have an issue in angular.js with directive/class ng-cloakor ng-show.
我在 angular.js 中遇到指令/类ng-cloak或ng-show.
Chrome works fine, but Firefox is causing blink of elements with ng-cloakor ng-show.
IMHO it's caused by the converting ng-cloak/ng-showto style="display: none;", probably the Firefox javascript compiler is little bit slower, so the elements appears for a while and then hide?
Chrome 工作正常，但 Firefox 导致带有ng-cloak或的元素闪烁ng-show。恕我直言，这是由转换ng-cloak/ ng-showto引起的style="display: none;"，可能是 Firefox javascript 编译器有点慢，所以元素出现一段时间然后隐藏？
Example:
例子：
<ul ng-show="foo != null" ng-cloak>..</ul>
回答by Tim Schaub
Though the documentation doesn't mention it, it might not be enough to add the display: none;rule to your CSS. In cases where you are loading angular.js in the body or templates aren't compiled soon enough, use the ng-cloakdirective andinclude the following in your CSS:
虽然文档没有提到它，但将display: none;规则添加到 CSS 中可能还不够。如果您在主体中加载 angular.js 或模板未及时编译，请使用该ng-cloak指令并在您的 CSS 中包含以下内容：
/*
Allow angular.js to be loaded in body, hiding cloaked elements until
templates compile. The !important is important given that there may be
other selectors that are more specific or come later and might alter display.
*/
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
As mentioned in the comment, the !importantis important. For example, if you have the following markup
正如评论中提到的，这!important很重要。例如，如果您有以下标记
<ul class="nav">
<li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>
and you happen to be using bootstrap.css, the following selector is more specific for your ng-cloak'ed element
并且您碰巧正在使用bootstrap.css，以下选择器更适合您的ng-cloak'ed 元素
.nav > li > a {
display: block;
}
So if you include a rule with simply display: none;, Bootstrap's rule will take precedence and the displaywill be set to block, so you'll see the flicker before the template compiles.
因此，如果您使用display: none;simple包含规则，Bootstrap 的规则将优先并且display将设置为block，因此您将在模板编译之前看到闪烁。
回答by btford
As mentioned in the documentation, you should add a rule to your CSS to hide it based on the ng-cloakattribute:
如文档中所述，您应该向 CSS 添加规则以根据ng-cloak属性隐藏它：
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
We use similar tricks on the "Built with Angular" site, which you can view the source of on Github: https://github.com/angular/builtwith.angularjs.org
我们在“Built with Angular”站点上使用了类似的技巧，您可以在 Github 上查看其源代码：https: //github.com/angular/builtwith.angularjs.org
Hope that helps!
希望有帮助！
回答by Andriy Drozdyuk
Make sure AngularJS is included in the headof the HTML. See ngCloak doc:
确保 AngularJS 包含在headHTML 中。参见ngCloak 文档：
For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application.
为获得最佳效果，必须在 html 文件的 head 部分加载 angular.js 脚本；或者，css 规则（以上）必须包含在应用程序的外部样式表中。
回答by Matt Hughes
I've never had much luck using ngCloak. I still get flickering despite everything mentioned above. The only surefire way to avoid flicking is to put your content in a template and include the template. In a SPA, the only HTML that will get evaluated before being compiled by Angular is your main index.html page.
我在使用 ngCloak 时从来没有这么幸运过。尽管上面提到了一切，我仍然会闪烁。避免轻弹的唯一可靠方法是将您的内容放在模板中并包含该模板。在 SPA 中，在被 Angular 编译之前唯一需要评估的 HTML 是您的主 index.html 页面。
Just take everything inside the body and stick it in a separate file and then:
只需取出 body 内的所有东西并将其粘贴到一个单独的文件中，然后：
<ng-include src="'views/indexMain.html'"></ng-include>
You should never get any flickering that way as Angular will compile the template before adding it to the DOM.
您永远不应该以这种方式闪烁，因为 Angular 会在将模板添加到 DOM 之前对其进行编译。
回答by Mark Rajcok
ngBindand ngBindTemplateare alternatives that do not require CSS:
ngBind和ngBindTemplate是不需要 CSS 的替代方案：
<div ng-show="foo != null" ng-cloak>{{name}}</div> <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>
回答by Corey Ballou
In addition to the accepted answer if you're using an alternative method of triggering ng-cloak...
除了已接受的答案，如果您正在使用触发 ng-cloak 的替代方法...
You may also wish to add some additional specificities to your CSS/LESS:
您可能还希望为 CSS/LESS 添加一些额外的特性：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
display: none !important;
}
回答by Seb Fanals
I had a similar issue and found out that if you have a class that contains transitions, the element will blink. I tried to add ng-cloak without success, but by removing the transition the button stopped blinking.
我有一个类似的问题，发现如果你有一个包含过渡的类，元素会闪烁。我尝试添加 ng-cloak 没有成功，但是通过删除转换按钮停止闪烁。
I'm using ionic framework and the button-outline has this transition
我正在使用离子框架，按钮轮廓有这个过渡
.button-outline {
-webkit-transition: opacity .1s;
transition: opacity .1s;
}
Simply overwrite the class to remove the transition and the button will stop blinking.
只需覆盖该类即可删除过渡，按钮将停止闪烁。
Update
更新
Again on ionic there is a flicker when using ng-show/ng-hide. Adding the following CSS resolves it:
再次在 ionic 上使用 ng-show/ng-hide 时会出现闪烁。添加以下 CSS 可以解决它：
.ng-hide-add,
.ng-hide-remove {
display: none !important;
}
Source: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9
来源：http: //forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9
回答by metamatt
I had a problem where a <div ng-show="expression">would be initially visible for a fraction of a second, even though "expression" was initially false, before the ng-show directive got a chance to run.
我遇到了一个问题<div ng-show="expression">，在 ng-show 指令有机会运行之前，即使“表达式”最初是假的，a 最初也会在几分之一秒内可见。
The solution I used was to manually add the "ng-hide" class, as in <div ng-show="expression" ng-hide>, to make sure it started initially hidden. The ng-show directive will add/remove the ng-hide class as necessary after that.
我使用的解决方案是手动添加“ng-hide”类，如<div ng-show="expression" ng-hide>，以确保它最初开始隐藏。ng-show 指令将在此之后根据需要添加/删除 ng-hide 类。
回答by CoperNick
Try to turn off the Firebug. I'm serious. This helps in my case.
尝试关闭 Firebug。我是认真的。这对我有帮助。
Apply accepted answer and then make sure that Firebugin your Firefox is turned off: press F12 then turn off Firebug for this page - small button in upper right corner.
应用接受的答案，然后确保Firefox中的Firebug已关闭：按 F12 然后关闭此页面的 Firebug - 右上角的小按钮。
回答by Andrew Downes
There's actually two separate problems that can cause the flicker issue and you could be facing either one or both of these.
实际上有两个单独的问题会导致闪烁问题，您可能会遇到其中一个或两个问题。
Problem 1: ng-cloak is applied too late
问题一：ng-cloak应用太晚
This issue is solved as descibed in many of the answers on this page is to make sure AngularJS is loaded in the head. See ngCloak doc:
此问题已解决，如本页上的许多答案所述，以确保 AngularJS 已加载到头部。参见ngCloak 文档：
For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application.
为获得最佳效果，必须在 html 文件的 head 部分加载 angular.js 脚本；或者，css 规则（以上）必须包含在应用程序的外部样式表中。
Problem 2: ng-cloak is removed too soon
问题二：ng-cloak 移除太早
This issue is most likely to occur when you have a lot of CSS on your page with rules cascading over one another and the deeper layers of CSS flash up before the top layer is applied.
当您的页面上有大量 CSS 且规则层叠在一起并且更深的 CSS 层在应用顶层之前闪现时，此问题最有可能发生。
The jQuery solutions in answers involving adding style="display:none"to your element do solve this issue so long as the style is removed late enough (in fact these solutions solve both problems). However, if you prefer not to add styles directly to your HTML you can achieve the same results using ng-show.
style="display:none"只要样式被删除得足够晚（实际上这些解决方案解决了这两个问题），涉及添加到元素的答案中的 jQuery 解决方案确实可以解决这个问题。但是，如果您不想直接向 HTML 添加样式，则可以使用ng-show.
Starting with the example from the question:
从问题中的示例开始：
<ul ng-show="foo != null" ng-cloak>..</ul>
Add an additional ng-show rule to your element:
向您的元素添加额外的 ng-show 规则：
<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>
(You need to keep ng-cloakto avoid problem 1).
（您需要保持ng-cloak以避免问题1）。
Then in your app.run set isPageFullyLoaded:
然后在你的 app.run set 中isPageFullyLoaded：
app.run(['$rootScope', function ($rootScope) {
$rootScope.$safeApply = function (fn) {
$rootScope.isPageFullyLoaded = true;
}
}]);
Be aware that depending on exactly what you're doing, app.run may or may not be the best place to set isPageFullyLoaded. The important thing is to make sure that isPageFullyLoadedgets set to true after whatever it is you don't want to flicker is ready to be revealed to the user.
请注意，具体取决于您在做什么， app.run 可能是也可能不是设置 的最佳位置isPageFullyLoaded。重要的是确保isPageFullyLoaded在您不想闪烁的任何内容准备好向用户显示后将其设置为 true。
It sounds like Problem 1is the problem the OP is hitting, but others are finding that solution does not work or only partially works because they are hitting Problem 2instead or as well.
听起来问题 1是 OP 遇到的问题，但其他人发现该解决方案不起作用或仅部分有效，因为他们正在解决问题 2或同样问题。
Important Note:Be sure to apply solutions to both ng-cloak being applied too late AND removed to soon. Solving only one of these problems may not relieve the symptoms.
重要提示：一定要对应用太晚和很快删除的 ng-cloak 应用解决方案。仅解决其中一个问题可能无法缓解症状。
