Angularjs - 一个伪装/ A-表演元素闪烁Angularjs - 一个伪装/ A-表演

我在与指令/类angular.js问题ng-cloak或ng-show 。

Chrome浏览器工作正常，但Firefox造成的元素的眨眼ng-cloak或ng-show 。 IMHO它是由转换引起的ng-cloak / ng-show到style="display: none;" ，可能是Firefox的JavaScript编译器是有点慢，所以元素出现了一段时间，然后躲起来？

例：

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

Answer 1:

虽然文件没有提到它，它可能不足以添加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 ，以下的选择是你的更具体的ng-cloak “编辑元素

.nav > li > a {
  display: block;
}

所以，如果你有一个简单的规则display: none; ，引导的规则将优先考虑与display将被设置为block ，所以你会看到闪烁的模板编译之前。

Answer 2:

由于在文档中提到的 ，你应该将其隐藏基础上，增加一条规则，你的CSS ng-cloak属性：

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

我们使用类似伎俩的“建有角”的网站，你可以在Github上查看来源： https://github.com/angular/builtwith.angularjs.org

希望帮助！

Answer 3:

确保AngularJS包括在head的HTML。 见ngCloak文档 ：

为了达到最佳效果，angular.js脚本必须在HTML文件的头部被加载; 可替代地，CSS规则（上文）必须包含在该应用程序的外部的样式表。

Answer 4:

我已经使用ngCloak从未有过多少运气。 我仍然得到尽管有上述一切闪烁。 唯一正确的方式，以避免轻拂是把你的内容模板，包括模板。 在SPA，将由角在编译之前得到评估的唯一HTML是你的主要index.html页面。

只要采取一切身体里面，贴在一个单独的文件，然后：

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

你永远不应该得到任何闪烁这样的角度将其添加到DOM之前编译模板。

Answer 5:

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>

Answer 6:

除了公认的答案，如果你使用的触发NG-斗篷的替代方法...

您也可以添加一些额外的具体情况添加到您的CSS /减：

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

Answer 7:

我有一个类似的问题，结果发现，如果你有一个包含过渡类，元素将闪烁。 我尝试添加NG-斗篷没有成功，但是通过删除按钮停止闪烁的过渡。

我使用的离子框架和按钮轮廓具有这种过渡

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

简单地覆盖类删除过渡和按钮将会停止闪烁。

更新

再次对离子存在使用NG-显示/ NG隐藏时闪烁。 添加下面的CSS解析它：

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

来源： http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

Answer 8:

我有一个问题，即一个<div ng-show="expression">将是一个几分之一秒的初始可见，即使“表达”最初是假的，之前的NG-显示指令有机会运行。

我用的解决方案是手动添加“NG隐藏”类，如在<div ng-show="expression" ng-hide> ，以确保它开始最初隐藏。 该NG秀指令将添加/删除后，按照需要的NG隐藏类。

Answer 9:

尝试关闭Firebug的 。 我是认真的。 这有助于在我的情况。

申请接受的答案，然后确保萤火虫在你的Firefox被关闭 ：然后按F12关闭萤火本页-小按钮，在右上角。

Answer 10:

有实际上是两个，可能会导致闪烁的问题不同的问题，你可能面对的一方或双方的这些。

问题1：NG-斗篷应用太晚

这个问题就解决了在许多此页面上的答案descibed是确保AngularJS的头部被加载。 见ngCloak文档 ：

为了达到最佳效果，angular.js脚本必须在HTML文件的头部被加载; 可替代地，CSS规则（上文）必须包含在该应用程序的外部的样式表。

问题2：NG-斗篷被过早地取消

这个问题是最有可能当你施加顶层之前有你的页面上有许多的CSS规则与在级联彼此CSS闪了更深层的发生。

在涉及添加答案jQuery的解决方案style="display:none"到你的元素做，只要风格被删除足够晚期（其实这些解决方案解决这两个问题）解决了这个问题。 不过，如果你不喜欢直接样式添加到您的HTML就可以实现使用相同的结果ng-show 。

从问题的例子开始：

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

添加其他NG-显示规则的元素：

<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。

这听起来像问题1是OP被击中的问题，但其他人发现解决方案无效或仅部分有效，因为他们打的问题 ，而不是2或为好。

重要提示：请务必解决方案，适用于应用这两个NG-斗篷太晚了，很快去除。 只有解决这些问题的一个可能不能缓解症状。

Answer 11:

我们跑进我们公司这个问题，并通过添加解决它“显示：无”的CSS样式对于那些闪烁NG-表演元素。 我们没有使用NG-斗篷的。 不像其他人在这个线程中，我们遇到此问题在Safari但不是Firefox或Chrome -这可能是由于在iOS7 Safari的懒惰重绘错误 。

Answer 12:

对于它的价值，我也有类似的问题，NG-斗篷不工作。 这可能是值得检查您的应用程序/网站与缓存启用重用的源文件，看看是否有帮助。

随着我的磨合与闪烁，我与DevTools开放和禁用缓存测试。 离开面板关闭与开启缓存固定我的问题。

Answer 13:

保持头部标签下面的语句解决了这个问题

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

官方文件

Answer 14:

我找不到任何的这些方法来工作，所以我最终没有下文。 对于元素你想最初是隐藏：

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

然后在你的控制器，在或接近顶部添加此：

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

这样一来，该元素最初是隐藏的，并只显示在控制器代码实际运行。

您可以调整位置，以您的需求，或者增加一些逻辑。 就我而言，我切换到登录路径如果没有当前登录，并没有想我的接口事先闪烁，所以我设置$scope.style登录的检查后。

Answer 15:

这是更好地使用ng-if代替ng-show 。 ng-if完全删除并重新创建元件在DOM并有助于避免NG-显示闪烁。

Answer 16:

我使用的离子型框架，添加CSS风格可能不适合某些情况下工作，你可以尝试使用NG-如果不是NG-显示/ NG隐藏

REF： https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+flickering+in+ios&source=bl&ots=m2Turk8DFh&sig=8hNiWx26euGR2k_WeyaVzdixJ8k&hl=en&sa=X&redir_esc=y#v = onepage＆q =纳克放映％20hide％20flickering％20英寸％20ios＆F =假

Answer 17:

你最好参考角度文件，监守版本[1.4.9]有更新，下面，使得它可以支持数据-NG-斗篷指令。

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

Answer 18:

我尝试了上述NG-斗篷解决方案，但它仍然有间歇性问题与Firefox。 只为我工作的解决方法是延迟形式的加载，直到角满载。

我只是在加入NG-初始化应用程序和使用NG-如果在形式方面，以检查是否我设置的变量已经加载。

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

Answer 19:

除了其他的答案，如果你发现的模板代码，闪光灯仍然存在的很可能你在页面底部有你的脚本，这意味着，在NG-斗篷指令直线上升将无法正常工作。 您可以将您的脚本头部或创建一个CSS规则。

文档说“为了获得最佳结果，angular.js脚本必须在HTML文档的头部部分被加载;或者，CSS规则上述必须被包括在该应用程序的外部的样式表”。

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

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

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

Answer 20:

我想在这里发布每一个解决方案，并仍然得到了在Firefox中忽隐忽现。

如果有帮助的人，我解决它通过添加style="display: none;" 的主要内容DIV，然后使用jQuery（我已经用它在页面上） $('#main-div-id').show(); 一旦一切都从服务器获取数据后装;

Answer 21:

我居然发现从建议里克施特拉尔的Web日志固定我的问题完全（因为我仍然有与NG-斗篷闪烁的奇怪问题原料{{代码}}的时间，尤其是在运行萤火虫）：

核选择：手动隐藏内容

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

之前，我想通了，我可以明确地嵌入CSS样式到网页中，我曾经试图弄清楚为什么NG-斗篷没有做的工作。 浪费了一个小时还是一无所获后，我终于决定只手动隐藏和显示容器。 这个想法很简单 - 最初隐藏容器，然后显示它曾经角度做了最初的加工和拆除模板标记从页面。

您可以手动隐藏内容，使角已经得到控制后，可见它。 要做到这一点我用：

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

注意显示：最初明确隐藏元素在页面上没有风格。

然后，一旦角已运行初始化和有效地处理网页上的模板标记可以显示的内容。 对于这个角“准备好”的事件是app.run（）函数：

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

这将有效消除显示：无风格和内容的显示。 由时间app.run（）触发的DOM是准备显示用数据填充或至少空数据 - 角已经得到控制。

Answer 22:

我尝试了所有的答案上面并没有什么工作。 使用离子开发的混合应用程序，并试图让错误消息不闪烁。 我结束了通过添加NG隐藏类我的元素解决我的问题。 我的DIV已经有NG-秀展现元素时出现错误。 加入纳克隐藏设置在div角被加载之前不显示。 没有NG-斗篷或添加角在必要的头。

Answer 23:

从上面的讨论

[ng-cloak] {
                display: none;
            }

是解决问题的最佳方式。

Answer 24:

我使用的指令NG-秀显示和隐藏弹出窗口。

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

以上都不为我工作，并采用NG-如果不是NG秀将是矫枉过正。 这将意味着去除，并在每一次点击将整个弹出内容到DOM。 相反，我增加了一个NG-如果同一元件以确保它不会在文件装载显示：

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

后来我加入了初始化到负责该指令以超时的控制器：

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

这样我消除了闪烁的问题，并避免在每一次点击DOM插入的代价高昂的操作。 在此之前，在使用两个范围变量为了同样的目的，而不是一个的费用，但到目前为止，这绝对是最好的选择。

Answer 25:

列出的解决方案中没有以上为我工作。 于是我决定看看实际的功能，并意识到，当“$ scope.watch”被解雇，它在名称字段这并不意味着这样的情况把一个值。 所以在我的代码设置和属性oldValue和NEWVALUE然后

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

基本上当scope.watch在这种情况下进行烧成，AngularJS监视更改名称变量（model.value）

Answer 26:

我将包裹<ul>与<div ng-cloak>

Answer 27:

我个人决定使用ng-class属性，而不是ng-show 。 我已经有很多更大的成功尤其是走这条路对于那些总是默认情况下不显示弹出窗口。

曾经被认为是<div class="options-modal" ng-show="showOptions"></div>

现： <div class="options-modal" ng-class="{'show': isPrintModalShown}">

与CSS的选项模态class是display: none默认。 该节目类包含display:block CSS。

Answer 28:

试了ng-cloak ，但仍然短暂闪烁。 下面的代码摆脱他们完全。

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

Answer 29:

避免断行

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

文章来源: Angularjs - ng-cloak/ng-show elements blink