Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

イベントリスナーを登録するには?(ng-clickなど)

2015年4月16日

AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。

  • このエントリーをはてなブックマークに追加

 AngularJSでは、イベントリスナーもディレクティブを使って設定します。例えば、以下はボタンをクリックすると、テキストボックスへの入力値に応じて、「こんにちは、●○さん!」のようなメッセージを表示する例です。

HTML
<!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>
clickイベントリスナーを設定するためのコード(event.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 サブミットした時
AngularJSの主なイベント関係のディレクティブ
  • *1 従来のonclickonmouseoverのような属性は利用できません(エラーとなります)ので、注意してください。

 ここでは、ng-click属性で[送信]ボタンをクリックした時の挙動を定義しているわけです。テキストボックスの値は、モデルnameにひも付いていますので、イベントリスナーの中でも$scope.nameにアクセスすることで、その値を取得できます。「こんにちは、●○さん!」のように整形した文字列は、$scope.msgに設定することでページにも反映できます。

[Note]属性値として処理コードを記述することも可能

 本文のサンプルでは、ng-click属性でイベントリスナー(正確には$scopeオブジェクトのメソッド)を呼び出しているだけですが、簡単なコードであれば、属性値として直接に処理コードを設定することもできます。

 例えば、以下は本文のサンプルを書き換えた例です。

HTML
<button ng-click="msg = 'こんにちは、' + name + 'さん!';">送信</button>
属性値に直接イベント処理を記述したコード

 属性値の中では、変数は$scopeオブジェクトのメンバーと見なされますので、「$scope.msg =~」のようにしてはいけません。

 テンプレートの中にコードを混在させるのは本来好ましくはないので、「こういう書き方もある」という程度に理解しておいてください。

イベントオブジェクトを参照する

 JavaScriptに精通している人であれば、「イベントリスナーにeevのような引数を与えることで、イベントオブジェクトを参照できる」と理解しているかもしれません。しかし、上のサンプルで以下のように書いてもイベントオブジェクトを参照することはできません。

JavaScript
$scope.onclick = function(e) {
  console.log(e);
  $scope.msg = 'こんにちは、' + $scope.name + 'さん!';
};
イベントオブジェクトを参照しようとしたコード(誤った例)

 試してみれば分かるように、コンソールにはundefinedと表示され、そのままではイベントオブジェクトを参照できていないことが確認できます。イベントオブジェクトを渡すには、ng-<イベント名>属性にリスナーを指定する際に、以下のように$eventオブジェクトを渡してください。$eventは、AngularJSで提供されるイベントオブジェクトです。

HTML
<button ng-click="onclick($event)">送信</button>
……中略……
$scope.onclick = function(e) {
  console.log(e);
  $scope.msg = 'こんにちは、' + $scope.name + 'さん!';
};
イベントオブジェクトを参照するための準備
イベントオブジェクトの内容を確認(コンソール)

 これで、イベントリスナーに確かにイベントオブジェクトが渡されていることが確認できます。

処理対象:イベントリスナー(Event Listeners) カテゴリ:基本
処理対象:$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]を参照してください。

AngularJS TIPS
6. モデルをビューにバインドするには?(ng-bind/ng-cloak)

エクスプレッションが一瞬表示されてしまう不具合を解消して、AngularJSの双方向データバインディングを実現する方法を説明する。

AngularJS TIPS
7. ビューにHTML文書をバインドするには?(ng-bind-html)

文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明する。

AngularJS TIPS
8. 【現在、表示中】≫ イベントリスナーを登録するには?(ng-clickなど)

AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。

AngularJS TIPS
9. ハイパーリンクを動的に生成するには?(ng-href)

スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。

AngularJS TIPS
10. 条件式の真偽に応じて表示を切り替えるには?(ng-if)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-if属性を使用する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!