Angularjs – ng-cloak / ng-show元素闪烁
我在angular.js中使用了指令/类ng-cloak或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>
尽pipe文档没有提到它，但可能不足以添加display: none; 规则到您的CSS。 在正文中加载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 ，下面的select器对于你的ng-cloak元素更具体
.nav > li > a { display: block; }
所以如果你包含一个简单的display: none;规则display: none; ，Bootstrap的规则将优先， display将被设置为block ，所以你会看到模板编译之前的闪烁。
正如在文档中提到的 ，你应该添加一个规则到你的CSS隐藏它基于ng-cloak属性：
[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }
我们在“Built with Angular”网站上使用类似的技巧，您可以在Github上查看源代码： https ： //github.com/angular/builtwith.angularjs.org
希望有所帮助！
确保AngularJS包含在HTML的head 。 看ngCloak文档 ：
为了获得最好的结果，angular.js脚本必须在html文件的头部加载; 或者，css规则（上面）必须包含在应用程序的外部样式表中。
使用ngCloak我从来没有运气过。 尽pipe上面提到的一切，我仍然闪烁。 避免轻弹的唯一可靠方法是将您的内容放在模板中并包含模板。 在SPA中，在由Angular编译之前，唯一可以进行评估的HTML是您的主要index.html页面。
把所有东西都放在身体里面，然后贴在一个单独的文件中，然后：
<ng-include src="'views/indexMain.html'"></ng-include>
你永远不应该得到闪烁的方式，因为Angular会在将模板添加到DOM之前编译模板。
ngBind和ngBindTemplate是不需要CSS的select：
<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>
除了被接受的答案，如果你正在使用触发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没有成功，但通过消除转换button停止闪烁。
我使用ionic framework，button轮廓有这个转换
.button-outline { -webkit-transition: opacity .1s; transition: opacity .1s; }
只需简单地覆盖该类以删除转换，并且button将停止闪烁。
更新
再次使用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
我有一个问题，在ng-show指令有机会运行之前，即使“expression式”最初是错误的，一个<div ng-show="expression">最初可以在几分之一秒内看到。
我使用的解决scheme是手动添加“ng-hide”类，如<div ng-show="expression" ng-hide> ，以确保它最初隐藏起来。 之后，ng-show指令将根据需要添加/删除ng-hide类。
尝试closuresFirebug 。 我是认真的。 这有助于我的情况。
应用接受的答案，然后确保您的Firefox中的Firebug已closures ：按F12，然后closures此页面的Firebug – 右上angular的小button。
我们在公司遇到了这个问题，并通过在CSS样式中添加“display：none”来解决这个问题。 我们根本不需要使用ng-cloak。 与此线程中的其他人不同，我们在Safari中遇到过这个问题，而不是Firefox或Chrome – 可能是由于Safari在iOS7中的重绘延迟问题 。
实际上有两个单独的问题，可能会导致闪烁问题，你可能会面临一个或两个这些。
问题1：ng-cloak太晚了
这个问题已经解决了，在这个页面上的许多答案都是为了确保AngularJS被加载到头部。 看ngCloak文档 ：
为了获得最好的结果，angular.js脚本必须在html文件的头部加载; 或者，css规则（上面）必须包含在应用程序的外部样式表中。
问题2：ng-cloak太快被移除
当您的页面上存在大量CSS且规则层叠在另一个上面时，最有可能发生此问题，并且在应用顶层之前，CSS的较深层会闪现。
只要样式被移除的时间足够长（实际上这些解决scheme可以解决这两个问题），那么jQuery解决scheme的答案就是将style="display:none"到元素中。 但是，如果您不想直接将样式添加到HTML中，则可以使用ng-show获得相同的结果。
从问题的例子开始：
<ul ng-show="foo != null" ng-cloak>..</ul>
为你的元素添加一个额外的ng-show规则：
<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>
（你需要保持ng-cloak来避免问题1）。
然后在你的app.run中设置isPageFullyLoaded ：
app.run(['$rootScope', function ($rootScope) { $rootScope.$safeApply = function (fn) { $rootScope.isPageFullyLoaded = true; } }]);
请注意，根据你正在做什么，app.run可能会或可能不是最好的地方来设置isPageFullyLoaded 。 重要的是要确保isPageFullyLoaded设置为true后，不pipe你不想闪烁什么都准备好显示给用户。
听起来问题1是OP正在碰到的问题，但其他人却发现解决scheme不起作用，或者只是部分起作用，因为他们正在碰到问题2 。
重要提示：请务必将解决scheme应用于同时使用太迟的ng-cloak和移除。 只解决其中的一个问题可能不能缓解症状。
对于它的价值，我有一个类似的问题，ng-cloak无法正常工作。 这可能是值得检查您的应用程序/网站启用caching重用源文件，看看是否有帮助。
随着我的运行闪烁，我正在testingDevTools打开和caching禁用。 使用cachingclosures面板解决了我的问题。
在head标签中保留下面的语句来解决这个问题
<style type="text/css"> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style>
官方文件
用ng-if代替ng-show更好。 ng-if完全删除并重新创buildDOM中的元素，并有助于避免ng-shows闪烁。
我使用ionic framework，添加CSS样式可能不适用于某些情况下，您可以尝试使用ng-if而不是ng-show / ng-hide
ref： https ： //books.google.com.my/books？ id = – 5_CwAAQBAJ ＆ ppg = PA138 ＆ lt = = onepage＆q =纳克放映％20hide％20flickering％20英寸％20ios＆F =假
你最好参考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; }
我不能得到任何这些方法的工作，所以我最终做了以下。 对于最初隐藏的元素：
<div <!--...--> style="display: none;" ng-style="style">
然后在你的控制器中，把它添加到顶部或附近：
$scope.style = { display: 'block' };
这样，元素最初是隐藏的，只有当控制器代码实际运行时才显示。
您可以根据需要调整展示位置，也许可以添加一些逻辑。 在我的情况下，我切换到loginpath，如果当前没有login，并不希望我的界面闪烁事先，所以我设置$scope.style后login检查。
我尝试了上面的ng-cloak解决scheme，但是它仍然与Firefox有间歇性的问题。 我唯一的解决方法是延迟表单的加载，直到Angular完全加载。
我只是在应用程序中添加ng-init，并在表单端使用ng-if来检查我设置的variables是否已经加载。
<div ng-app="myApp" ng-init="loaded='yes'"> <form ng-if="loaded.length > 0"> <!--all my elements here--> </form> </div>
我会用<div ng-cloak>包装<ul> <div ng-cloak>
除了其他的答案之外，如果你发现模板代码的闪现仍然存在，那么你的脚本可能在页面底部，这意味着直接使用ng-cloak指令是行不通的。 您可以将脚本移动到头部或创buildCSS规则。
该文档说：“为了最好的结果，angular.js脚本必须加载到HTML文档的头部分;或者，上面的css规则必须包含在应用程序的外部样式表中。
现在，它不一定是一个外部样式表，而只是在头部的一个元素。
<style type="text/css"> .ng-cloak { display: none !important; } </style>
来源： https ： //docs.angularjs.org/api/ng/directive/ngCloak
我试着在这里发布的每个解决scheme，仍然在Firefox中闪烁。
如果它帮助任何人，我通过添加style="display: none;"来解决它 到主要内容div，然后使用jQuery（我已经在页面上使用它） $('#main-div-id').show(); 一旦从服务器获取数据后，一切都被加载;
实际上，我发现Rick Strahl的Web Log提出的build议很好地解决了我的问题（因为有时候我仍然遇到ng-cloak闪烁的raw {{code}}，尤其是在运行Firebug的时候）：
核选项：手动隐藏内容
使用显式的CSS是最好的select，所以以下不应该是必要的。 但是我会在这里提到它，因为它提供了一些洞察力，你可以如何在加载其他框架或者在你自己的基于标记的模板上手动隐藏/显示内容。
在我发现可以明确地将CSS样式embedded到页面之前，我试图弄清楚为什么ng-cloak没有做好工作。 浪费了一个小时后，我终于决定手动隐藏和显示容器。 这个想法很简单 – 最初隐藏容器，然后显示一次，Angular已经完成了它的初始处理，并从页面中删除了模板标记。
您可以手动隐藏内容，并在Angular获得控制权后使其可见。 要做到这一点，我用：
<div id="mainContainer" class="mainContainer boxshadow" ng-app="app" style="display:none">
注意显示：无风格显式隐藏页面上最初的元素。
然后，一旦Angular运行了它的初始化并有效地处理了页面上的模板标记，就可以显示内容。 对于Angular来说，这个'ready'事件是app.run（）函数：
app.run( function ($rootScope, $location, cellService) { $("#mainContainer").show(); … });
这有效地消除了display：none样式和内容显示。 在app.run（）触发时，DOM已经准备好显示填充数据或者至less是空数据 – Angular已经得到了控制。
我尝试了上面所有的答案，没有任何工作。 使用离子开发混合应用程序，并试图使错误消息不闪烁。 我最终通过在我的元素中添加一个ng-hide类来解决我的问题。 我的div已经有了ng-show来显示出现错误时的元素。 添加ng-hide在加载angular之前设置div不显示。 没有ng披风或增加头部的angular度必要的。
AS从上面的讨论
[ng-cloak] { display: none; }
是解决问题的最佳途径。
我在指令中使用ng-show来显示和隐藏popup窗口。
<div class="..." ng-show="showPopup">
以上都没有为我工作，而使用ng-if而不是ng-show将是一个矫枉过正。 这意味着每次点击都会删除整个popup内容并将其添加到DOM中。 相反，我添加了ng-if到相同的元素，以确保它不显示在文档加载：
<div class="..." ng-show="showPopup" ng-if="popupReady">
之后，我将这个初始化添加到负责这个指令的控制器中，超时：
$timeout(function () { $scope.popupReady = true; });
这样我就消除了闪烁的问题，并避免了每次点击DOM代理的昂贵操作。 这是以牺牲使用两个范围variables为同一目的而不是一个，但到目前为止，这绝对是最好的select。
我个人决定使用ng-class属性而不是ng-show 。 特别是对于默认情况下总是不显示的popup窗口，我已经有了更多的成功。
曾经是<div class="options-modal" ng-show="showOptions"></div>
现在是： <div class="options-modal" ng-class="{'show': isPrintModalShown}">
与选项模式类CSS display: none默认情况下display: none 。 show类包含display:block CSS。
避免换行
<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';">
