ng-cloak和ng-show闪烁屏幕上的隐藏元素

Question

我有一个div元素，当我的项目列表为空时，我只想显示它。所以我放入以下内容（以haml为单位）：

  #no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }

然而，即使在我完成之后，元素仍然在屏幕上闪烁。然后我看到Angularjs - ng-cloak/ng-show elements blink，但即使在我的CSS中添加以下内容后，仍然会发生眨眼。

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

任何想法我做错了什么？

Answer 1

你可以将ng-hide放在类中，而不会影响JS在加载后的工作方式。但是，将它放在那里以便CSS在等待JS加载时将其考虑在内是很有用的。

<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
    Some text
</div>        
</div>

Answer 2

确保在页面开头加载上面显示的ng-cloak CSS。

这应该是你需要做的全部：

<div ng-hide="items.length" ng-cloak>no items</div>

示例fiddle。

Answer 3

这些解决方案都不适合我。我找到的唯一解决方案如下：

在每个控制器中，添加：

$scope.$on('$viewContentLoaded', function () {
            $scope.completed = true;
});            

并在每个视图的html中添加ng-if =＆＃34;已完成＆＃34;到最顶层的元素。例如：

<div ng-if="completed">

注意：问题仅限于 firefox 和 ui-router 。在那里，ng-cloak被忽略，并且没有css解决方法。对我有用的唯一解决方案是我上面给出的解决方案。

Answer 4

目前这是一个未解决的问题： https://github.com/angular/angular.js/issues/14015

这个解决方法对我有用：

.ng-hide.ng-hide-animate {
    display: none !important;
}