javascript - 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 ，因此您会在模板编译之前看到闪烁。