AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ

以前IEの各バージョンでhtml、css、jsプロパティとかがどれくらい対応してるのかをまとめてそれをインクリメントサーチできる「IEEEeee」ってWebアプリをAngularJSで作ったんですが何点か気になったところがあったので直してみた。その1つが表題の件。

多分AngularJSを使い出して最初に気になるところだと思うんだけど新しい物をやり出した時って何となくそういうもんなんかなぁって放置することも多いんだけど今回は頑張った。つか調べただけやけど。

ロード中にコンパイル前のタグが表示される

これ結構なんだかなぁな感じ。普通に {{ore.name}} とか出てくる。完全に呪文よね。これはとりあえず何とかし用途思ったら割と普通にそういった感じの対処をする機能があってビックリした。ngCloakってディレクティブがあるみたいでその名の通り覆い隠す感じなんでしょうね。これを使って解消すれば良いとのこと。

使い方

隠したい要素に ng-cloak と .ng-cloak を追加する。隠したい要素をラップしてる要素でも良い。

■ html
<div class='dog' mg-cloak class='mg-cloak'>
<p class='name'>{{dog.name}}</p>
</div>

ちなみに .ng-cloak をつけたのは属性セレクタでcssを充てられないレガシーブラウザ対応。

これにcssを充てていく。

■ sass
[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
  display: none !important

これでOK。ng-cloak を付けた箇所はロード中は非表示にしてくれます。これべんり。

これでIEEEeeeがちょっと見た目良い感じになったかなぁと