盎格鲁- ngcloak / ngg展示blink元素

我有一个问题在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>

当前回答

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

其他回答

实际上，我发现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已经获得了控制权。

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

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

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

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

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

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

希望有帮助!

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

推荐文章