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="completed“添加到最上面的元素。例如：

<div ng-if="completed">

注意:该问题仅限于firefox路由器和ui-。在这里，ng-cloak被忽略，并且没有css解决方案。唯一对我有效的解决方案是我上面给出的解决方案。