Angularjs - ng-cloak/ng-show 元素闪烁
我在 angular.js 中遇到指令/类ng-cloak
或ng-show
.
Chrome 可以正常工作,但 Firefox 会导致带有ng-cloak
或的元素闪烁ng-show
。恕我直言,这是由转换ng-
cloak
/ng-show
引起的style="display: none;"
,可能是 Firefox javascript
编译器有点慢,所以元素出现一段时间然后隐藏?
例子:
<ul ng-show="foo != null" ng-cloak>..</ul>
-
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
,因此您会在模板编译之前看到闪烁。