ng-cloakとng-showは画面上の隠し要素を点滅します

Question

私の項目リストが空のときに表示したいdiv要素があります。だから私は次のように（ハムルで）入れます：

#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の動作に影響を与えずに、ng-hideをクラスに追加できます。しかし、JSをロードするのを待っている間にCSSがそれを考慮に入れるように、そこに置くと便利です。

<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"> 

注：この問題は、FirefoxのとUI-ルータに制限されています。そこでは、ng-cloakは無視され、cssの回避策はありません。私のために働いた唯一の解決策は、私が上に与えたものです。

Answer 4

このため、現在開いている問題があります： https://github.com/angular/angular.js/issues/14015

この回避策は、私の仕事：NG-マントをする魔法はありません

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