AngularJSのビルトインのディレクティブの概要

AngularJSアプリの最上位のコンポーネントであるAngularJSのモジュールについて概要を簡単にまとめました。

※目次をクリックすると目次の下部にコンテンツが表示されます。

ディレクティブとは?
・ディレクティブによってHTMLを拡張し、機能を追加する事が出来ます。
 
・AngularJSによってデフォルトで50以上のディレクティブが用意されていて(ビルトインディレクティブ)、すぐに利用できます。一方、自分でディレクティブを定義する(カスタムディレクティブ)事も出来ます。
 
・ビルトインディレクティブを使うことによって、データバインディング、フォームバリデーション、テンプレートの生成、イベントハンドリング、HTML要素の操作などを容易に行う事が出来ます。

ディレクティブの適用方法
ディレクティブの適用の仕方には、HTMLの要素、属性、クラスの3つがあります。各ディレクティブ毎にこの3つの指定方法のどれを使用できるかが決まっています。
 
①要素として適用した例
 
<ng-include src=”‘table.html'”></ng-include>
 
②属性として適用した例
 
<span ng-bind=”members.length”></span>
 
③クラスとして適用した例
 
<span class=”ng-bind: members.length”></span>

主なビルトインディレクティブ
①データバインディングディレクティブ
 
モデルとHTMLビューとの間でデータをやり取りする。
 
ng-bind
ng-bind-html
ng-bind-template
ng-model
 
②テンプレートディレクティブ
 
テンプレートを使ってHTML要素を生成する。
 
ng-cloak
ng-include
ng-repeat
ng-repeat-start
ng-repeat-end
ng-switch
 
③要素を表示・非表示、追加・除去など行うディレクティブ
 
DOM内で要素を設定したりスタイリングを行う。
 
ng-if
ng-class
ng-class-even
ng-class-odd
ng-hide
ng-show
ng-style
 
④イベントディレクティブ
 
イベントをハンドリングする。
 
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-paste
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
 
⑤その他
 
ng-checked
ng-disabled
ng-open
ng-readonly
ng-selected
ng-href
ng-src
ng-srcset

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください