我有一个问题在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>
当前回答
我尝试了上面所有的答案,但都没用。使用ionic开发了一个混合应用程序,并试图使错误信息不闪烁。我最终通过在元素中添加ng-hide类解决了这个问题。我的div已经有ng-show来显示出现错误时的元素。添加ng-hide可以设置div在angular加载之前不显示。没有斗篷或增加角的头必要。
其他回答
虽然文档没有提到它,但添加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,因此您将在模板编译之前看到闪烁。
除了已接受的答案,如果你正在使用另一种触发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解决方案,但它在Firefox上仍然有间歇性的问题。 对我来说,唯一有效的解决方法是延迟加载表单,直到Angular完全加载完毕。
我只是在应用程序中添加了ng-init,并在窗体侧使用ng-if来检查我设置的变量是否已经加载。
<div ng-app="myApp" ng-init="loaded='yes'">
<form ng-if="loaded.length > 0">
<!--all my elements here-->
</form>
</div>
保持下面的声明在头标签固定了这个问题
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
官方文档
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>