AngularJS TIPS
イベントリスナーを登録するには？（ng-clickなど）
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。
AngularJSでは、イベントリスナーもディレクティブを使って設定します。例えば、以下はボタンをクリックすると、テキストボックスへの入力値に応じて、「こんにちは、●○さん！」のようなメッセージを表示する例です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<form ng-controller="myController">
<label for="name">名前：</label>
<input id="name" name="name" type="text" ng-model="name" />
<button ng-click="onclick()">送信</button>
<div>{{msg}}</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
// myAppモジュールにmyControllerコントローラーを登録
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
// 変数msgを初期化
$scope.msg = 'こんにちは、誰かさん！';
// clickイベントリスナーを設定
$scope.onclick = function() {
$scope.msg = 'こんにちは、' + $scope.name + 'さん！';
};
}]);
</script>
</body>
</html>
|
イベントリスナーを設定するには、イベントを関連付けたい要素に対して、
ng-＜イベント名＞="イベントリスナー()"
のように指定します*1。以下に、AngularJSで提供されているイベント関係のディレクティブをまとめます。
| ディレクティブ名 | 概要 |
|---|---|
| ng-click | クリックした時 |
| ng-dblclick | ダブルクリックした時 |
| ng-mousedown | マウスボタンが押されたとき |
| ng-mouseup | マウスボタンが離されたとき |
| ng-mouseenter | 要素にマウスポインターが入った時 |
| ng-mouseleave | 要素からマウスポインターが出た時 |
| ng-mousemove | 要素上をマウスポインターが移動した時 |
| ng-mouseover | 要素上にマウスポインターが重なった時 |
| ng-mouseout | 要素上に重なっていたマウスポインターが外れた時 |
| ng-focus | 要素にフォーカスした時 |
| ng-blur | 要素からフォーカスが外れた時 |
| ng-keydown | キーを押した時 |
| ng-keypress | キーを押し続けている時 |
| ng-keyup | キーを離した時 |
| ng-change | 値を変更し時 |
| ng-copy | コピーした時 |
| ng-cut | カットした時 |
| ng-paste | ペーストした時 |
| ng-submit | サブミットした時 |
- *1 従来の
onclick、onmouseoverのような属性は利用できません（エラーとなります）ので、注意してください。
ここでは、ng-click属性で［送信］ボタンをクリックした時の挙動を定義しているわけです。テキストボックスの値は、モデルnameにひも付いていますので、イベントリスナーの中でも$scope.nameにアクセスすることで、その値を取得できます。「こんにちは、●○さん！」のように整形した文字列は、$scope.msgに設定することでページにも反映できます。
［Note］属性値として処理コードを記述することも可能
本文のサンプルでは、ng-click属性でイベントリスナー（正確には$scopeオブジェクトのメソッド）を呼び出しているだけですが、簡単なコードであれば、属性値として直接に処理コードを設定することもできます。
例えば、以下は本文のサンプルを書き換えた例です。
|
<button ng-click="msg = 'こんにちは、' + name + 'さん！';">送信</button>
|
属性値の中では、変数は$scopeオブジェクトのメンバーと見なされますので、「$scope.msg =～」のようにしてはいけません。
テンプレートの中にコードを混在させるのは本来好ましくはないので、「こういう書き方もある」という程度に理解しておいてください。
イベントオブジェクトを参照する
JavaScriptに精通している人であれば、「イベントリスナーにe、evのような引数を与えることで、イベントオブジェクトを参照できる」と理解しているかもしれません。しかし、上のサンプルで以下のように書いてもイベントオブジェクトを参照することはできません。
|
$scope.onclick = function(e) {
console.log(e);
$scope.msg = 'こんにちは、' + $scope.name + 'さん！';
};
|
試してみれば分かるように、コンソールにはundefinedと表示され、そのままではイベントオブジェクトを参照できていないことが確認できます。イベントオブジェクトを渡すには、ng-＜イベント名＞属性にリスナーを指定する際に、以下のように$eventオブジェクトを渡してください。$eventは、AngularJSで提供されるイベントオブジェクトです。
|
<button ng-click="onclick($event)">送信</button>
……中略……
$scope.onclick = function(e) {
console.log(e);
$scope.msg = 'こんにちは、' + $scope.name + 'さん！';
};
|
これで、イベントリスナーに確かにイベントオブジェクトが渡されていることが確認できます。
処理対象：$event カテゴリ：式（Expressions）
API：ngClick（ng-click）｜ngDblclick（ng-dblclick）｜ngMousedown（ng-mousedown）｜ngMouseup（ng-mouseup）｜ngMouseenter（ng-mouseenter）｜ngMouseleave（ng-mouseleave）｜ngMousemove（ng-mousemove）｜ngMouseover（ng-mouseover）｜ngMouseout（ng-mouseout）｜ngFocus（ng-focus）｜ngBlur（ng-blur）｜ngKeydown（ng-keydown）｜ngKeypress（ng-keypress）｜ngKeyup（ng-keyup）｜ngChange（ng-change）｜ngCopy（ng-copy）｜ngCut（ng-cut）｜ngPaste（ng-paste）｜ngSubmit（ng-submit） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
API：ngModel（ng-model） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第6回～第10回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. モデルをビューにバインドするには？（ng-bind／ng-cloak）
エクスプレッションが一瞬表示されてしまう不具合を解消して、AngularJSの双方向データバインディングを実現する方法を説明する。
7. ビューにHTML文書をバインドするには？（ng-bind-html）
文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明する。
8. 【現在、表示中】≫ イベントリスナーを登録するには？（ng-clickなど）
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。
