我有一个问题在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>
当前回答
上面列出的解决方案没有一个对我有效。然后我决定看看实际的函数,并意识到当“$scope.”Watch”被解雇了,它在name字段中放置了一个值,这并不意味着是这样的情况。在代码中,我设置oldValue和newValue
$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});
本质上,当范围。在这种情况下,AngularJS监视name变量(model.value)的变化。
其他回答
我在使用ngCloak时从未有过太多的运气。尽管上面提到了一切,我仍然会看到闪烁。避免弹移的唯一可靠方法是将内容放在模板中并包含该模板。在SPA中,唯一在被Angular编译之前会被评估的HTML是你的主index.html页面。
只需要把身体里的所有东西都放在一个单独的文件里,然后:
<ng-include src="'views/indexMain.html'"></ng-include>
这样你就不会看到任何闪烁,因为Angular会在将模板添加到DOM之前对其进行编译。
最好使用ng-if而不是ng-show。ng-if完全删除并重新创建DOM中的元素,并有助于避免ng-shows闪烁。
确保AngularJS包含在HTML的头部。参见ngCloak文档:
为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。
我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加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
避免断行
<meta http-equiv="Content-Security-Policy" content="
default-src 'FOO';
script-src 'FOO';
style-src 'FOO';
font-src 'FOO';">
适用于Firefox 45.0.1
<meta http-equiv="Content-Security-Policy" content=" default-src 'FOO'; script-src 'FOO'; style-src 'FOO'; font-src 'FOO';">