我有一个问题在angular.js的指令/类ng-斗篷或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>
我有一个问题在angular.js的指令/类ng-斗篷或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。如果你在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;
}
因此,如果您包含一个简单的display: none;规则,Bootstrap的规则将优先,显示将被设置为block,因此您将在模板编译之前看到闪烁。
其他回答
试着关闭Firebug。我是认真的。这对我很有帮助。
应用已接受的答案,然后确保Firefox中的Firebug已关闭:按F12,然后关闭此页的Firebug -右上角的小按钮。
除了其他答案,如果你发现模板代码的闪光仍然发生,这可能是你的脚本在页面的底部,这意味着ng-cloak指令将不会直接工作。您可以将脚本移到头部,也可以创建CSS规则。
文档说:“为了达到最好的效果,angular.js脚本必须加载在html文档的头部部分;或者,上面的CSS规则必须包含在应用程序的外部样式表中。”
现在,它不必是一个外部样式表,而只是在头部的一个元素中。
<style type="text/css">
.ng-cloak {
display: none !important;
}
</style>
来源:https://docs.angularjs.org/api/ng/directive/ngCloak
ngBind和ngBindTemplate是不需要CSS的替代品:
<div ng-show="foo != null" ng-cloak>{{name}}</div> <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>
我正在使用ionic框架,添加css样式可能在某些情况下不工作,你可以尝试使用ng-if而不是ng-show / ng-hide
裁判:https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show +隐藏+闪烁+ + ios&source = bl&ots = m2Turk8DFh&sig = 8 hniwx26eugr2k_weyavzdixj8k&hl = en&sa = X&redir_esc = y v = onepage&q = ng-show % 20号隐藏% 20闪烁% 20 % 20 ios&f = false
我遇到了一个问题,在ng-show指令有机会运行之前,<div ng-show="expression">最初会在几分之一秒内可见,即使"expression"最初是假的。
我使用的解决方案是手动添加“ng-hide”类,如<div ng-show="expression" ng-hide>,以确保它一开始是隐藏的。ng-show指令将在此之后根据需要添加/删除ng-hide类。