[解決済み】Angularjs - ng-cloak/ng-show要素がブリンクする。

質問

Angular.js のディレクティブ/クラスで問題が発生しました。 ng-cloak または ng-show .

Chrome は問題なく動作しますが、Firefox では ng-cloak または ng-show . IMHOでは、この問題は、変換された ng-cloak / ng-show から style="display: none;" というのは、おそらくFirefoxのjavascriptコンパイラが少し遅いので、要素がしばらく表示され、その後隠れるのでは？

例

<ul ng-show="foo != null" ng-cloak>..</ul>

解決方法は？

ドキュメントには記載されていませんが、このような場合は display: none; ルールをCSSに追加してください。 angular.jsをbodyで読み込んでいる場合や、テンプレートがすぐにコンパイルされない場合などには ng-cloak ディレクティブ と をCSSに記述してください。

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

コメントにもあるように !important が重要です。 たとえば、次のようなマークアップがあるとします。

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

を使用していて、たまたま bootstrap.css の場合、次のセレクタはより具体的です。 ng-cloak 要素

.nav > li > a {
  display: block;
}

そのため、単に display: none; を指定すると、Bootstrap のルールが優先されます。 display に設定されます。 block そのため、テンプレートがコンパイルされる前にフリッカーが表示されます。