ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す
はじめに
AngularJSリファレンスを参考にDOM操作のサンプルを一通り作ってみた。ほとんどのサンプルは自分が理解し易いように改変してあります。やはり読むだけではなく、実際に手を動かした方が理解が早い。詳しい説明はAngularJSリファレンスをどうぞ。サンプルはcodepen.ioで作ったのでまとめて見たい方はこちら。
ngBind : 2-1-1
ngBindはモデルをビューにバインディングするディレクティブ。サンプルの通り、いくつかの記法があるけれどJavaScriptがオフになっていることを考慮するのであればカスタム属性ng-bind="hoge"を使った方が良いのかもしれません。後者の記述方法でもngCloakを使うことで初期化前にバインディング用のタグが表示されてしまう問題は解決できます。
<input type="text" ng-model="myName" placeholder="yourName">
<p ng-bind="myName"></p>
<p>{{ myName }}</p>
ngBindHtml : 2-1-2
ngBindHtmlはHTMLタグなどの文字列を無害化して表示するディレクティブです。これを使うにはngSanitizeモジュールが必要になります。
ngBindTemplate : 2-1-3
ngBindTemplateはテンプレートを作成し複数の要素をBindすることができます。spanタグでバインド先を分けられないOptionタグなどで活用できます。
ngNonBindable : 2-1-4
Bindさせたくない場合に指定するとngBindの部分がそのまま表示されます。どんなところで使うのか具体的にはイメージできてません。
ngCloak : 2-1-5
AngularJSの初期化処理が完了するまでngBindがそのまま表示されてしまう問題を解決します。CSSに特定の属性が適用されている場合display: none;を適用し、AngularJSの初期化が終了した段階でngCloak属性が削除され表示されるようになります。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
ngStyle : 2-1-6
ngStyleはStyle属性を動的に操作します。Styleの操作はできればClassで制御するのが適切かと思います。
ngClass : 2-1-7
ngClassは動的にClassを操作します。状態に合わせたスタイルの変更はこれを多用することになりそうですね。HashでClassをオン・オフできるのはかなり便利そうです。
ngClassEven / ngClassOdd : 2-1-8,9
ngClassEvenはngRepeatと組み合わせて使い偶数行に対しての振る舞いを定義できます。ngClassOddは奇数業に対して振る舞いを定義します。テーブルの行を色分けしたりとか。
ngShow / ngHide : 2-1-10,11
ngShowは値の評価がtrueであれば内包する要素を表示します。ngHideは評価がtrueであれば要素を非表示にします。簡単に表示制御を行うならこれですね。
ngOpen : 2-1-12
ngOpenはdetails要素にのみ指定できる特殊なディレクティブです。簡単に開閉する要素を作ることができます。
ngPluralize : 2-1-13
ngPluralizeは数値によって表示を切り替えるディレクティブです。
ngIf : 2-1-14
ngIfは値がfalseと評価された時、対象のDOMをDOMツリーから削除します。ngShow/ngHideはdisplay: noneで隠すだけですがngIfはDOM自体を削除します。trueと評価された場合にDOMツリーに再構築されます。
ngSwitch : 2-1-15
ngSwitchはswitch文と同様の役割を果たしテンプレートをケース分けすることができます。
ngRepeat : 2-1-16
ngRepeatはループ処理を行うディレクティブです。
ngMessages / ngMessage : 2-1-17
ngMessagesはメッセージを扱うためのディレクティブです。ngMessagesを使うにはngMessagesモジュールが必要です。DOM操作系のディレクティブの中では一番複雑なサンプルかもしれません。
以上、DOM操作系のディレクティブサンプルでした。
シリーズ
- AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ
- ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる
- ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に
- ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境
- ウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替え
- ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識
- ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス
- ウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す
- ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す
- ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
- ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する
- ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策
- ウェブデザイナーがはじめるAngularJS：コントローラ間の連携
- ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap