我有一个问题在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>
当前回答
由以上讨论可知
[ng-cloak] {
display: none;
}
是解决这个问题的完美方法。
其他回答
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>
我们在公司遇到了这个问题,并通过在CSS样式中为那些闪烁的ng-show元素添加“display: none”来解决它。我们根本不需要使用ng-cloak。不像这篇文章中的其他人,我们在Safari中遇到了这个问题,而不是Firefox或Chrome——可能是由于Safari在iOS7中的懒惰重绘错误。
我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加ng-cloak,但没有成功,但通过删除过渡按钮停止闪烁。
我用的是离子框架,纽扣轮廓有这样的过渡
.button-outline {
-webkit-transition: opacity .1s;
transition: opacity .1s;
}
只需重写类以删除转换,按钮就会停止闪烁。
更新
同样,在ionic上使用ng-show/ng-hide时会出现闪烁。添加以下CSS可以解决这个问题:
.ng-hide-add,
.ng-hide-remove {
display: none !important;
}
来源:http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9
由以上讨论可知
[ng-cloak] {
display: none;
}
是解决这个问题的完美方法。
除了其他答案,如果你发现模板代码的闪光仍然发生,这可能是你的脚本在页面的底部,这意味着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