我有一个问题在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-show来显示和隐藏弹出窗口。
<div class="..." ng-show="showPopup">
以上这些方法都不适合我,使用ng-if而不是ng-show就太过分了。这意味着每次单击时都要删除整个弹出内容并将其添加到DOM中。相反,我在同一元素中添加了ng-if,以确保它不会在文档加载时显示:
<div class="..." ng-show="showPopup" ng-if="popupReady">
之后,我将初始化添加到负责该指令的控制器中,并设置了一个超时:
$timeout(function () {
$scope.popupReady = true;
});
通过这种方式,我消除了闪烁问题,并避免了在每次单击时插入DOM的昂贵操作。这样做的代价是使用两个作用域变量来实现相同的目的,而不是一个,但到目前为止,这绝对是最好的选择。
其他回答
我遇到了一个问题,在ng-show指令有机会运行之前,<div ng-show="expression">最初会在几分之一秒内可见,即使"expression"最初是假的。
我使用的解决方案是手动添加“ng-hide”类,如<div ng-show="expression" ng-hide>,以确保它一开始是隐藏的。ng-show指令将在此之后根据需要添加/删除ng-hide类。
由以上讨论可知
[ng-cloak] {
display: none;
}
是解决这个问题的完美方法。
保持下面的声明在头标签固定了这个问题
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
官方文档
确保AngularJS包含在HTML的头部。参见ngCloak文档:
为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。
我个人决定使用ng-class属性而不是ng-show。我在这方面取得了很多成功,特别是在默认情况下总是不显示弹出窗口的情况下。
以前是什么<div class="options-modal" ng-show="showOptions"></div>
“股票期权”>
options-modal类的CSS显示:默认为none。show类包含了display:block CSS。