AngularJSのビルトインのディレクティブを使ってイベントを処理する方法について確認しました。

デモとコードサンプルはこちら。
　

（１）AngularJSのイベントを処理するディレクティブ

　
ディレクティブの名前でどのようなイベントを処理するか推測できるかと思います。
　
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-clickディレクティブを使って”btnColor1″という変数に’btn-success’というBootstrap3のCSSクラス名を設定しています。
　
ng-click=”btnColor1=’btn-success'”
　
“btnColor1″という変数は、ng-classディレクティブを使ってボタンのCSSを設定しているので、クリックするとボタンの色が変わります。他のイベントについても同様です。

  <button class="btn" ng-class="btnColor1"
          ng-click="btnColor1='btn-success'"
          ng-mouseenter="btnColor1='btn-primary'"
          ng-mouseleave="btnColor1='btn-defult'"
  >
    イベント処理１
  </button>

　
２）$eventオブジェクトを使った例
　
イベントディレクティブは、イベントオブジェクトを$eventとして利用することが出来ます。
　
下記例では、$eventオブジェクトを使ってイベントのタイプを取得し、イベントのタイプ毎に処理を切替えています。
　
このときAngularJSのディレクティブ（例ng-mouseenter）の名前とイベントオブジェクトのタイプで取得する値の名前（mouseover）が一致しない場合があるので注意します。下記サンプルではconsole.logで実際に検知したイベントの名前を確認しています。

  <button class="btn" ng-class="btnColor2"
          ng-click="handleEvent($event)"
          ng-mouseenter="handleEvent($event)"
          ng-mouseleave="handleEvent($event)"
  >
    イベント処理２
  </button>

（スクリプト）
  $scope.handleEvent = function (e) {
    console.log("イベントのタイプ: " + e.type);
    switch (e.type){
      case "mouseover":
        $scope.btnColor2 = "btn-primary";
        break;
      case "mouseenter":
        $scope.btnColor2 = "btn-primary";
        break;
      case "click":
        $scope.btnColor2 = "btn-success";
        break;
      default:
        $scope.btnColor2 = "btn-default";
        break;
    }
  }

関連記事の目次