解 説

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コード

<div ng-controller="mainController">          
    <div>
      <label>ユーザー名を入力してください:</label>
    <input type="text" ng-model="name" />
  </div>
  <div ng-if="name.length !== characters">ユーザー名は5文字にしてください</div>
  <hr>
  <p>ユーザー名は…{{name}}</p>
  </div>      
</div>

AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', function ($scope) {
    $scope.name = '';   
    $scope.characters = 5;
}]);

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

ng-classの使い方

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

「ng-class」デモ

<div ng-class="{'alert-warning':name.length < 5,'alert-danger':name.length > 5}"
>ユーザー名は5文字にしてください</div>

AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', function ($scope) {
    $scope.name = '';   
    $scope.characters = 5;
}]);

ng-repeatの使い方

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

ng-repeatデモ
HTMLコード

<ul>
    <li ng-repeat="rule in rules">{{rule.myText}}</li>
</ul>

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

AngularJSコード

var myApp = angular.module('myApp', []);

myApp.controller('mainController',['$scope',function($scope) {
	$scope.rules = [
		{myText:'AAAAAAAAAAA'},
		{myText:'BBBBBBBBBBB'},
		{myText:'CCCCCCCCCCC'}
	];
}]);

ng-clickの使い方

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

ng-clickデモ
HTMLコード

<div ng-controller="mainController">
            <button ng-click="alertClick()">click</button>
</div>

AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController',['$scope',function($scope) {
    $scope.alertClick = function(){
	alert('クリックした');
}
}]);

イベント関連の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リファレンスで確認することができます。