我有一个问题在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>
当前回答
你最好参考angular文档,因为版本[1.4.9]已经更新到下面,使得它可以支持data-ng-cloak指令。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
其他回答
除了已接受的答案,如果你正在使用另一种触发ng-cloak的方法…
你也可能希望添加一些额外的特性到你的CSS/LESS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
display: none !important;
}
由以上讨论可知
[ng-cloak] {
display: none;
}
是解决这个问题的完美方法。
我不能让这些方法工作,所以我最终做了以下。对于你最初想隐藏的元素:
<div <!--...--> style="display: none;" ng-style="style">
然后在你的控制器中,在顶部或顶部附近添加以下内容:
$scope.style = { display: 'block' };
这样,元素最初是隐藏的,只有当控制器代码实际运行时才显示。
您可以根据需要调整位置,也许还可以添加一些逻辑。在我的例子中,如果当前没有登录,我将切换到登录路径,并且不希望我的界面事先闪烁,因此我设置了$scope。样式后的登录检查。
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