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-cloak CSS正在加載到頁面的開頭。

這應該是所有你需要做的：

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

樣品。

Answer 2

您可以將隱藏在類中，而不會影響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 3

沒有解決方案爲我工作。我發現的唯一的解決方案如下：

在每個控制器中，添加：

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

和在每個視圖的HTML中，添加NG-如果=「完成」到最上面的元件。例如：

<div ng-if="completed"> 

注：該問題僅限於火狐和UI路由器。在那裏，ng-cloak被忽略，並且沒有css解決方法。對我而言唯一的解決方案就是我上面給出的解決方案。

Answer 4

目前旗下有一個開放的問題，爲此： https://github.com/angular/angular.js/issues/14015

此解決方案爲我工作：

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