Angularjs - NG-斗篷/ NG出现闪烁的元素 [英] Angularjs - ng-cloak/ng-show elements blink

问题描述

我在与指令/类angular.js问题 NG-斗篷或 NG-节目。

浏览器工作正常，但Firefox造成的元素与闪烁 NG-斗篷或 NG-节目。
恕我直言，它是由转换 NG-斗篷 / NG-节目到风格=显示所致：无;，可能是Firefox的JavaScript编译器是有点慢，所以元素出现了一会儿，然后隐藏

？

例如：

 ＆LT; UL NG秀=！富= NULLNG-斗篷＆GT; ..＆LT; / UL＆GT;
 

解决方案

虽然文件没有提到它，它可能不够，添加显示：无; 规则你的CSS。当您正在加载angular.js在体内或模板不编译很快的情况下，使用 NG-斗篷指令和提供按照你的CSS：

  / *
  身体要加载允许angular.js，躲在隐形元素，直到
  模板编译。该！重要的是重要的考虑到有可能是
  其他选择是更具体的或以后，可能改变显示。
 * /
[NG \\：披风]，[NG-披风] .ng披风{
  ！显示：无重要;
}
 

正如评论所说，！重要是很重要的。例如，如果您有以下标记

 ＆LT; UL类=导航＆GT;
  ＆LT;立GT;＆LT; A HREF =/ foo的NG-斗篷＆GT; {{}吧}＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

和你碰巧使用 bootstrap.css ，以下是选择更多特定的 NG-斗篷 编元素

  .nav＆GT;李＆GT;一个 {
  显示：块;
}
 

所以，如果你包括简单的显示一个规则：无; ，引导的规则将采取precedence和显示将被设置为块，所以你会看到闪烁的模板编译之前。

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

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?

Example:

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

解决方案

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;
}

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>

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;
}

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-斗篷/ NG出现闪烁的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！