我有个问题.js指令/ng-cloak
级或ng-show
级.
Chrome可以正常工作,但Firefox会导致ng-cloak
或ng-show
的元素闪烁.
示例:
<ul ng-show="foo != null" ng-cloak>..</ul>
我有个问题.js指令/ng-cloak
级或ng-show
级.
Chrome可以正常工作,但Firefox会导致ng-cloak
或ng-show
的元素闪烁.
示例:
<ul ng-show="foo != null" ng-cloak>..</ul>
尽管文档没有提到这一点,但是将display: none;
规则添加到您的CSS可能还不够.如果要在正文中加载angular.js,或者模板编译得不够快,请使用ng-cloak
指令and在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;
}
正如 comments 中提到的,!important
是重要的.例如,如果您有以下标记
<ul class="nav">
<li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>
而您恰好使用了bootstrap.css
,下面的 Select 器更适合您的ng-cloak
'ed元素
.nav > li > a {
display: block;
}
因此,如果您将一条规则包含为display: none;
,则 bootstrap 规则将优先,display
将设置为block
,因此您将在模板编译之前看到闪烁.