我会用<div ng-cloak>包裹<ul>

正如在文档中提到的，你应该添加一个规则到你的CSS来隐藏它基于ng-cloak属性:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

我们在“用Angular构建”网站上使用了类似的技巧，你可以在Github上查看源代码:https://github.com/angular/builtwith.angularjs.org

希望有帮助!

虽然文档没有提到它，但添加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，因此您将在模板编译之前看到闪烁。

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>

确保AngularJS包含在HTML的头部。参见ngCloak文档:

为了得到最好的结果，angular.js脚本必须加载在头文件中 HTML文件的部分;或者，CSS规则(上面)必须是 包含在应用程序的外部样式表中。

我在使用ngCloak时从未有过太多的运气。尽管上面提到了一切，我仍然会看到闪烁。避免弹移的唯一可靠方法是将内容放在模板中并包含该模板。在SPA中，唯一在被Angular编译之前会被评估的HTML是你的主index.html页面。

只需要把身体里的所有东西都放在一个单独的文件里，然后:

<ng-include src="'views/indexMain.html'"></ng-include>

这样你就不会看到任何闪烁，因为Angular会在将模板添加到DOM之前对其进行编译。

我们在公司遇到了这个问题，并通过在CSS样式中为那些闪烁的ng-show元素添加“display: none”来解决它。我们根本不需要使用ng-cloak。不像这篇文章中的其他人，我们在Safari中遇到了这个问题，而不是Firefox或Chrome——可能是由于Safari在iOS7中的懒惰重绘错误。

除了已接受的答案，如果你正在使用另一种触发ng-cloak的方法…

你也可能希望添加一些额外的特性到你的CSS/LESS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}

不管怎样，我也遇到过类似的问题，斗篷不能用。也许有必要检查你的应用/站点是否启用了缓存来重用源文件，看看是否有帮助。

随着我与闪烁的磨合，我在DevTools打开和缓存禁用的情况下进行测试。离开面板关闭缓存启用固定我的问题。

除了其他答案，如果你发现模板代码的闪光仍然发生，这可能是你的脚本在页面的底部，这意味着ng-cloak指令将不会直接工作。您可以将脚本移到头部，也可以创建CSS规则。

文档说:“为了达到最好的效果，angular.js脚本必须加载在html文档的头部部分;或者，上面的CSS规则必须包含在应用程序的外部样式表中。”

现在，它不必是一个外部样式表，而只是在头部的一个元素中。

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

来源:https://docs.angularjs.org/api/ng/directive/ngCloak

我有一个类似的问题，并发现如果你有一个类包含过渡，元素将闪烁。我试图添加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

保持下面的声明在头标签固定了这个问题

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
</style>

官方文档

我遇到了一个问题，在ng-show指令有机会运行之前，<div ng-show="expression">最初会在几分之一秒内可见，即使"expression"最初是假的。

我使用的解决方案是手动添加“ng-hide”类，如<div ng-show="expression" ng-hide>，以确保它一开始是隐藏的。ng-show指令将在此之后根据需要添加/删除ng-hide类。

我尝试了这里发布的每一个解决方案，仍然在Firefox中闪烁。

如果它有助于任何人，我通过添加style="display: none;"到主要内容div，然后使用jQuery(我已经在页面上使用它)$('#main-div-id').show();一旦从服务器获取数据后加载了所有内容;

实际上，我发现Rick Strahl's Web Log的建议完美地解决了我的问题(因为我仍然有ng-cloak有时会闪烁原始{{code}}的奇怪问题，特别是在运行Firebug时):

核心选项:手动隐藏内容

使用显式CSS是最好的选择，所以下面的内容应该是不必要的。但我在这里提到它，因为它提供了一些见解，如何在其他框架或自己的基于标记的模板加载时手动隐藏/显示内容。

在我搞清楚我可以显式地将CSS样式嵌入到页面之前，我曾试图弄清楚为什么ng-cloak没有完成它的工作。在浪费了一个小时的时间后，我最终决定手动隐藏并显示容器。想法很简单——最初隐藏容器，然后在Angular完成初始处理并从页面中删除模板标记后显示它。

你可以手动隐藏内容，并在Angular获得控制权后使其可见。为此，我使用:

<div id="mainContainer" class="mainContainer boxshadow"
    ng-app="app" style="display:none">

注意display: none样式，它显式地隐藏了页面上最初的元素。

一旦Angular运行了初始化，并有效地处理了页面上的模板标记，你就可以显示内容了。对于Angular来说，这个' ready '事件就是app.run()函数:

app.run( function ($rootScope, $location, cellService) {        
    $("#mainContainer").show();
    …
});

这有效地删除了display:none样式和内容显示。当app.run()触发时，DOM已经准备好显示已填充的数据，或者至少是空数据——Angular已经获得了控制权。

最好使用ng-if而不是ng-show。ng-if完全删除并重新创建DOM中的元素，并有助于避免ng-shows闪烁。

试着关闭Firebug。我是认真的。这对我很有帮助。

应用已接受的答案，然后确保Firefox中的Firebug已关闭:按F12，然后关闭此页的Firebug -右上角的小按钮。

我正在使用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

你最好参考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;
}

避免断行

<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';">

我尝试了上面所有的答案，但都没用。使用ionic开发了一个混合应用程序，并试图使错误信息不闪烁。我最终通过在元素中添加ng-hide类解决了这个问题。我的div已经有ng-show来显示出现错误时的元素。添加ng-hide可以设置div在angular加载之前不显示。没有斗篷或增加角的头必要。

由以上讨论可知

[ng-cloak] {
                display: none;
            }

是解决这个问题的完美方法。

我不能让这些方法工作，所以我最终做了以下。对于你最初想隐藏的元素:

<div <!--...--> style="display: none;" ng-style="style">

然后在你的控制器中，在顶部或顶部附近添加以下内容:

$scope.style = { display: 'block' };

这样，元素最初是隐藏的，只有当控制器代码实际运行时才显示。

您可以根据需要调整位置，也许还可以添加一些逻辑。在我的例子中，如果当前没有登录，我将切换到登录路径，并且不希望我的界面事先闪烁，因此我设置了$scope。样式后的登录检查。

我尝试了上面的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>

我在指令中使用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的昂贵操作。这样做的代价是使用两个作用域变量来实现相同的目的，而不是一个，但到目前为止，这绝对是最好的选择。

实际上有两个独立的问题会导致闪烁问题，你可能会面临其中一个或两个。

问题1:ng-cloak应用得太晚

这个问题的解决方法是确保AngularJS加载在头文件中。参见ngCloak文档:

为了得到最好的结果，angular.js脚本必须加载在头文件中 HTML文件的部分;或者，CSS规则(上面)必须是 包含在应用程序的外部样式表中。

问题2:ng-cloak被过早移除

当您的页面上有大量的CSS，规则相互层叠，并且在应用顶层之前较深层的CSS闪现时，最可能发生此问题。

jQuery的解决方案包括在元素中添加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>

(为了避免问题1，你需要带上斗篷)。

然后在你的app.run set isPageFullyLoaded:

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

注意，根据你正在做的事情，app.run可能是设置isPageFullyLoaded的最佳位置，也可能不是。重要的是确保isPageFullyLoaded在你不想闪烁的东西准备好显示给用户后被设置为true。

听起来问题1是OP正在解决的问题，但其他人发现解决方案不起作用或只部分起作用，因为他们正在解决问题2。

重要提示:请确保在ng-cloak应用太晚和移除太快的情况下使用解决方案。仅解决其中一个问题可能无法缓解症状。

我个人决定使用ng-class属性而不是ng-show。我在这方面取得了很多成功，特别是在默认情况下总是不显示弹出窗口的情况下。

以前是什么<div class="options-modal" ng-show="showOptions"></div>

“股票期权”>

options-modal类的CSS显示:默认为none。show类包含了display:block CSS。

尝试了ng-cloak，但仍然眨眼。下面的代码完全清除它们。

<body style="display:none;" ng-style="{'display':'block'}">

上面列出的解决方案没有一个对我有效。然后我决定看看实际的函数，并意识到当“$scope.”Watch”被解雇了，它在name字段中放置了一个值，这并不意味着是这样的情况。在代码中，我设置oldValue和newValue

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

本质上，当范围。在这种情况下，AngularJS监视name变量(model.value)的变化。