我有一个问题在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的规则将优先,显示将被设置为块,所以你会看到在模板编译之前的闪烁。