解 説

AngularJSのよく使うdirectiveの紹介です。
今回は「ng-if」、「ng-class」、「ng-repeat」、「ng-click」、「ng-cloak」を紹介していますが、他にも便利なdirectiveがありますので公式ページのDeveroperのAPIリファレンスで確認すると良いでしょう。

ng-ifの使い方

「ng-if」はその値が「true」か「false」かで評価して「true」だったら「ng-if」属性の付いたDOMを表示し、「false」なら非表示にしてくれます。

ng-ifデモ
HTMLコード

AngularJSコード

「ng-if」と似たようなdirectiveに「ng-show」と「ng-hide」があります。これはDOMは存在するが隠したり表示したりするものです。
一方「ng-if」はDOM自体を隠したり表示したりするものです。

ng-classの使い方

「ng-class」はclassをつけたり外したりします。
「ng-if」と合わせて使う場合もあります。

「ng-class」デモ

AngularJSコード

ng-repeatの使い方

「ng-repeat」は同じことを繰り返したいときに使います。比較的よく使われるdirectiveです。
HTML側の繰り返したい要素、例えばliに「ng-repeat=”rule in rules”」と記述します。
値の「rules」はAngularJS側で$scopeに付けたプロパティ名です。「rule」の方は好きな名前で構いませんが、「{{rule.myText}}」のインターポレーションの中でこの名前を使います。好きなところでプロパティを追加できるのは、やりたい放題なJavaScriptの特徴ですね。

ng-repeatデモ
HTMLコード

AngularJS側は$scopeに「rules」というプロパティを作って配列の値を代入しています。
この配列の要素はオブジェクトになっており、キーは好きな名前を付けます。このキーはHTML側のインターポレートで使用します。そしてオブジェクトの値がループさせたliの中身になる要素です。

AngularJSコード

ng-clickの使い方

「ng-click」はクリックしたら関数を実行するDirectiveです。イベントリスナーもdirectiveを使って設定できます。
HTML側に「ng-click」属性を置き、値に関数を置きます。
AngularJS側で関数の定義を記述します。

ng-clickデモ
HTMLコード

AngularJSコード

イベント関連のdirectiveは次のようなものがあります。

イベント関連のディレクティブ
ディレクティブ名 概要
ng-focus フォーカスが当たった時
ng-blur フォーカスがはずれた時
ng-change 要素の内容が変わった時
ng-click クリックされた時
ng-dblclick ダブルクリックされた時
ng-submit フォームがサブミットされた時
ng-copy コピーされた時
ng-cut 切り取り時
ng-paste 貼り付け時
ng-keydown キーボードのキーがダウンした時
ng-keypress キーボードのキーを押し続けている時
ng-keyup キーボードのキーがアップした時
ng-mousedown マウスのクリックでボタンが押された時
ng-mouseup マウスのクリックでボタンがアップした時
ng-mouseenter マウスのカーソルが指定した要素内に入った時
ng-mouseleave マウスのカーソルが指定した要素から出た時
ng-mousemove マウスのカーソルが移動した時
ng-mouseover マウスのカーソルが指定した要素の上にある時

ng-cloakについて

AngularJS読み込みの関係で、「{{ }}」が一瞬表示されてしまうのを防ぐのが「ng-cloak」です。

directiveは多くのものが用意されています。
各directiveの詳細は公式ページのDeveroperのAPIリファレンスで確認することができます。