Angularjs - ng-cloak/ng-show 元素闪烁 [英] Angularjs - ng-cloak/ng-show elements blink

问题描述

我在 angular.js 中遇到指令/类 ng-cloak 或 ng-show 的问题.

I have an issue in angular.js with directive/class ng-cloak or ng-show.

Chrome 工作正常，但 Firefox 使用 ng-cloak 或 ng-show 导致元素闪烁.恕我直言，这是由将 ng-cloak/ng-show 转换为 style="display: none;" 引起的，可能是 Firefox javascript 编译器有点慢，所以元素出现一段时间然后隐藏?

Chrome works fine, but Firefox is causing blink of elements with ng-cloak or ng-show. IMHO it's caused by the converting ng-cloak/ng-show to style="display: none;", probably the Firefox javascript compiler is little bit slower, so the elements appears for a while and then hide?

示例:

<ul ng-show="foo != null" ng-cloak>..</ul>

推荐答案

虽然文档没有提到它，但将 display: none; 规则添加到 CSS 中可能还不够.如果您在主体中加载 angular.js 或模板未及时编译，请使用 ng-cloak 指令并在您的 CSS 中包含以下内容:

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-cloak directive and include the following in your 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;
}

正如评论中提到的，!important 很重要.例如，如果您有以下标记

As mentioned in the comment, the !important is important. For example, if you have the following markup

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

而您恰好在使用 bootstrap.css，以下选择器更适合您的 ng-cloak 元素

and you happen to be using bootstrap.css, the following selector is more specific for your ng-cloak'ed element

.nav > li > a {
  display: block;
}

因此，如果您仅包含一个带有 display: none; 的规则，Bootstrap 的规则将优先，并且 display 将设置为 block，因此您会在模板编译之前看到闪烁.

So if you include a rule with simply display: none;, Bootstrap's rule will take precedence and the display will be set to block, so you'll see the flicker before the template compiles.

这篇关于Angularjs - ng-cloak/ng-show 元素闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！