AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
2014年01月16日
以前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がちょっと見た目良い感じになったかなぁと
他にこんな事も書いてます
- JavaScript祭スピンオフ! フロントエンド祭り in Co-Edo でオブジェクトベースのJSについて話してきた
- 第5回 HTML5minutes! で話してきた
- 秋のJavaScript祭りで話をしてきた
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- Dashすげー便利
- jQueryのwidth,height系メソッドの違いについて
- Grunt+ST2な人がプロジェクトをチャチャっと開始する方法
- ローカルマシンにNode.jsをインストール
- スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
- PHPのvar_dumpをChromeのconsole.logとして出力する
この記事の分類
種類: Web制作
ジャンル: AngularJS javascript web制作
FBでコメント