Javascript Angularjs-ng斗篷/ng显示元素闪烁

我在angular.js中遇到了指令/class

ng-clope

或

ng-show

的问题

Chrome工作正常，但Firefox使用

ng-Clope

或

ng-show

导致元素闪烁。 我想这是因为将

ng-clope

/

ng-show

转换为

style=“display:none；”“

，可能是Firefox javascript编译器的速度稍慢了一点，所以元素会出现一段时间然后隐藏

例如：

<ul ng-show="foo != null" ng-cloak>..</ul>

。

我会用

包装

，因为您应该在CSS中添加一条规则，根据

ng-clope

属性将其隐藏：

[ng\：斗篷]，[ng斗篷]，.ng斗篷{
显示：无；
}

我们在“使用Angular构建”站点上使用了类似的技巧，您可以在Github上查看其源代码：

---

希望有帮助

尽管文档没有提到它，但是添加

显示：无可能是不够的规则添加到CSS中。如果要在正文中加载angular.js，或者模板编译不够快，请使用
ng-clope
指令并在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;
}

如评论中所述，
！重要信息
非常重要。例如，如果您具有以下标记

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

因此，如果您包含一个规则，其中只包含
display:none，引导的规则将优先，并且
显示将设置为
块
，因此您将在模板编译之前看到闪烁。
是不需要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>

{{name}
确保HTML的
标题中包含AngularJS。见：

为了获得最佳结果，必须在头部加载angular.js脚本
html文件的节；或者，css规则（如上）必须是
包含在应用程序的外部样式表中

我从来没用过NG斗篷。尽管有上面提到的一切，我还是会闪烁。唯一可靠的避免flicking的方法是将内容放在模板中并包含模板。在SPA中，在Angular编译之前，唯一会得到评估的HTML是您的main index.HTML页面

只需将身体内部的所有东西放入单独的文件中，然后：



在将模板添加到DOM之前，Angular将编译模板，因此您永远不会得到任何闪烁。我们在公司遇到了这个问题，并通过在CSS样式中为那些闪烁的ng show元素添加“display:none”来解决它。我们根本不需要使用ng斗篷。与此线程中的其他线程不同，我们在Safari中遇到了此问题，但在Firefox或Chrome中没有遇到此问题——这可能是因为。
除了使用另一种触发ng斗篷的方法的公认答案之外

您可能还希望在CSS/LESS中添加一些额外的特性：

[ng\：斗篷]，[ng斗篷]，[data ng斗篷]，[x-ng-斗篷]，
.ng斗篷，.x-ng斗篷，
生皮{
显示：无！重要；
}
值得一提的是，我遇到了一个类似的问题，就是ng斗篷不起作用。在启用缓存以重用源文件的情况下，检查应用程序/站点是否有帮助可能是值得的

当我的run-in闪烁时，我在DevTools打开且缓存被禁用的情况下进行测试。关闭面板并启用缓存修复了我的问题。
除了其他答案外，如果您发现模板代码仍在闪烁，则很可能您的脚本位于页面底部，这意味着ng-Clope指令无法直接运行。您可以将脚本移动到头部，也可以创建CSS规则

文档说“为了获得最佳结果，angular.js脚本必须加载到html文档的head部分；或者，上面的css规则必须包含在应用程序的外部样式表中。”

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

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


.ng斗篷{
显示：无！重要；
}

来源：
我有一个类似的问题，并发现如果您有一个包含转换的类，元素将闪烁。我试图添加ng斗篷，但没有成功，但通过删除转换按钮停止闪烁

我使用的是ionic框架，按钮轮廓有这种过渡

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

只需覆盖类以删除转换，按钮将停止闪烁

更新

使用ng show/ng hide时，在IONAL上再次出现闪烁。添加以下CSS可解决此问题：

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

来源：
将以下语句保留在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 \：斗篷]，[ng斗篷]，[data ng斗篷]，[x-ng-斗篷]，.ng斗篷，.x-ng-斗篷{
显示：无！重要；
}

我遇到了一个问题，
在ng show指令运行之前，即使“expression”一开始是假的，但一个
最初会在几秒钟内可见

我使用的解决方案是手动添加“ng hide”类，如
中所示，以确保它最初是隐藏的。ng show指令将根据需要添加/删除ng hide类。
我尝试了这里发布的每个解决方案，但仍然在Firefox中闪烁

如果它对任何人都有帮助，我通过将
style=“display:none；”“
添加到main content div，然后使用jQuery（我已经在页面上使用过它）
$（'#main div id'）.show（）解决了这个问题
从服务器获取数据后加载所有内容后
 事实上，我发现来自的建议完美地解决了我的问题（因为我仍然有一个奇怪的问题，ng斗篷有时会闪烁raw{{code}}，特别是在运行Firebug时）：

核心选项：手动隐藏内容

使用显式CSS是最好的选择，所以下面的内容永远不会出现
<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
</style>

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

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

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

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">

[ng-cloak] {
                display: none;
            }

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

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

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>

<div class="..." ng-show="showPopup">

<div class="..." ng-show="showPopup" ng-if="popupReady">

$timeout(function () {
    $scope.popupReady = true;
});

<ul ng-show="foo != null" ng-cloak>..</ul>

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

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

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

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