我有一个问题在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>
当前回答
虽然文档没有提到它，但添加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，因此您将在模板编译之前看到闪烁。
其他回答
避免断行
<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';">
我会用<div ng-cloak>包裹<ul>
正如在文档中提到的，你应该添加一个规则到你的CSS来隐藏它基于ng-cloak属性:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
我们在“用Angular构建”网站上使用了类似的技巧，你可以在Github上查看源代码:https://github.com/angular/builtwith.angularjs.org
希望有帮助!
我不能让这些方法工作，所以我最终做了以下。对于你最初想隐藏的元素:
<div <!--...--> style="display: none;" ng-style="style">
然后在你的控制器中，在顶部或顶部附近添加以下内容:
$scope.style = { display: 'block' };
这样，元素最初是隐藏的，只有当控制器代码实际运行时才显示。
您可以根据需要调整位置，也许还可以添加一些逻辑。在我的例子中，如果当前没有登录，我将切换到登录路径，并且不希望我的界面事先闪烁，因此我设置了$scope。样式后的登录检查。
我有一个类似的问题，并发现如果你有一个类包含过渡，元素将闪烁。我试图添加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
