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;的规则，Bootstrap
的规则将优先，display并将设置为block，因此您会在模板编译之前看到闪烁。