Angularjs – ng-cloak/ng-show元素闪烁

前端之家收集整理的这篇文章主要介绍了Angularjs – ng-cloak/ng-show元素闪烁前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个问题在angular.js与指令/类ng-cloak或ng-show。

Chrome运行正常,但Firefox使用ng-cloak或ng-show使元素闪烁。
IMHO它是由转换ng-cloak / ng-show到style =“display:none;”引起的,可能Firefox javascript编译器有点慢,所以元素出现一段时间,然后隐藏?

例:

<ul ng-show="foo != null" ng-cloak>..</ul>
虽然文档没有提到它,它可能不足以添加display:none;规则到您的CSS。如果你在body中加载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;
}

所以如果你包含一个简单的显示:none,Bootstrap的规则将优先,显示将被设置为块,所以你会看到在模板编译之前的闪烁。

猜你在找的Angularjs相关文章