AngularJS-ng-cloak / ng-show元素闪烁

Question

我在angular.js中有指令/类ng-cloak或问题ng-show。

Chrome可以正常运行，但是Firefox会通过ng-cloak或导致元素闪烁ng-show。恕我直言，它是由引起的转换ng-cloak/
ng-show到style="display: none;"，可能是Firefox的JavaScript编译器是有点慢，所以元素出现了一会儿，然后躲起来？

例：

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

Answer 1

尽管文档中没有提到它，但是将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;
}

如评论中所提到的，!important至关重要。例如，如果您具有以下标记

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

并且您碰巧正在使用bootstrap.css，以下选择器更适合您ng-cloak的ed元素

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

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