Angularjs -ng-cloak/ng-显示元素闪烁

Question

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

Chrome浏览器运行良好，但火狐浏览器会导致ng-cloak或ng-show元素闪烁。是不是因为把ng-cloak/ng-show转换成style="display: none;"导致的，可能是火狐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，因此您将在模板编译之前看到闪烁。

Answer 2

作为mentioned in the documentation，您应该根据ng-cloak属性向您的CSS添加一个规则来隐藏它：

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

我们在"Built with Angular“网站上使用了类似的技巧，你可以在Github上查看其源代码：https://github.com/angular/builtwith.angularjs.org

希望这能有所帮助！

Answer 3

确保AngularJS包含在HTML的head中。请参阅ngCloak doc

为获得最佳结果，angular.js脚本必须加载到html文件的head部分；或者，css规则(上面)必须包含在应用程序的外部样式表中。