概要

AngularJS のビルトインディレクティブのうちイベント関連のものをコード例とともに列挙します。公式ドキュメントはこちらです。

イベントディレクティブ

以下のテンプレートで ng-app="myApp" と指定していることに注意してください。

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>

ここにサンプルコードを記述

</body>
</html>

ngClick

<div ng-controller="myController">
  <input type="button" value="+10" ng-click="count=count+10">
  <input type="button" value="/2" ng-click="click()">
  <p>{{ count }}</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.count = 0;
   $scope.click = function(){
     $scope.count = $scope.count / 2;
   }
 }]);
</script>

ngDblClick

<html lang="ja" ng-app="myApp">
↓
<html lang="ja" ng-app>

とした上で以下のようにします。

<button ng-dblclick="myflag=true">ダブルクリックボタン</button>
<p ng-show="myflag">成功</p>

ngMousedown/ngMouseup/ngMouseenter/ngMouseover

以下では ng-mousedown の例を示します。ng-mouseup, ng-mouseenter, ng-mouseover でも同様です。

<div ng-controller="myController">
  <p ng-mousedown="mousedown()" ng-style="myStyle">マウスダウンで背景色が変化</p>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.mousedown = function(){
     $scope.myStyle = { 'background-color': '#fafafa' };
   }
 }]);
</script>

その他

ngMouseleave → マウスが要素上から離れると発火
ngMousemove → マウスが要素上を動くと発火
ngFocus → フォームが入力モードになると発火
ngBlur → フォームが入力モードでなくなると発火
ngKeydown → キーが押されると発火
ngKeypress → キーが押されると発火 (文字入力が発生しないカーソルキーやコントロールキーは除く)
ngKeyup → 押されたキーが上がると発火
ngChange → フォームの入力内容が変化すると発火
ngChecked → チェックボックスやラジオボタンでチェックを入れる
ngCopy → Ctrl-C などでコピーが実行されると発火
ngCut → Ctrl-X などで切り取りが実行されると発火
ngPaste → Ctrl-V などで貼り付けが実行されると発火
ngSubmit → フォームが送信されると発火

コントローラ内でイベント情報を扱う

イベントディレクティブで発火させた関数内でイベント情報を扱うことができます。

<div ng-controller="myController">
  <button ng-click="click($event)">コンソールにイベント情報を出力</button>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.click = function($event){
     console.log($event);
   }
 }]);
</script>

バブリング

AngularJS に限らずイベントが発生すると DOM ツリーの上位要素に同じイベントが伝搬します。親要素にリスナーが登録されていれば発火します。これをバブリングとよびます。子要素で発生したイベントの伝搬を抑制したい場合は以下のようにします。

<div ng-controller="myController">
  <div ng-click="clickParent()">
    <button ng-click="propagate($event)">バブリングあり</button>
    <button ng-click="noPropagate($event)"バブリングなし</button>
  </div>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){

   $scope.propagate = function($event){
     console.log('clicked');
   }
   $scope.noPropagate = function($event){
     console.log('clicked');
     $event.stopPropagation();
   }
   $scope.clickParent = function(){
     console.log('propagated');
   }
 }]);
</script>

外部 HTML を読み込む (onload イベント)

<div ng-controller="myController">
  <div ng-include="'./sub.html'"></div>
  <div ng-include="'./sub.html'" onload="myOnload()"></div>
</div>

<script>
 angular.module('myApp', []).controller('myController', ['$scope', function($scope){
   $scope.myOnload = function(){
     console.log('loaded');
   }
 }]);
</script>