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