盎格鲁- 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>

当前回答

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

其他回答

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

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

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

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

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

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

推荐文章