AngularJS非標準のイベントリスナーを実装する - UI Event
AngularJSでは、ng-click、ng-submitをはじめ、イベントに応じてリスナーを紐付けるために、専用のディレクティブを用意しています（詳しくは、別稿も参照してください）。
そして、これら標準のディレクティブでは提供されないイベントを扱うのが、UI Eventの役割です。Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-ui-event
たとえば以下は、ページの枠内で右クリックした場合に、コンテキストメニューを表示しないようにする例です。これには、contextmenuイベントで、イベントのデフォルトの挙動（＝コンテキストメニューの表示）をキャンセルします。
リスト3 event.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link href="css/event.css" rel="stylesheet" />
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）event.min.jsをインポート -->
<script src="bower_components/angular-ui-event/dist/event.min.js"></script>
<script src="scripts/event.js"></script>
</head>
<body ng-controller="MyController">
<!-- （3）ハッシュ形式でリスナーを紐づけ -->
<div ui-event="{ contextmenu : 'oncontext($event)' }">
右クリックしてください。
</div>
</body>
</html>
リスト4 event.js
// （2）ui.eventモジュールへの依存関係を設定
angular.module('myApp', [ 'ui.event' ])
.controller('MyController', ['$scope', function($scope) {
$scope.oncontext = function($event) {
// （4）イベント標準の挙動をキャンセル
$event.preventDefault();
};
}]);
UI Eventを利用するには、ライブラリ本体（event.min.js）をインポートした上で、アプリモジュール（myApp）からはui.eventモジュールへの依存関係を宣言します（2）。
あとは、ui-event属性で「イベント名: リスナー」のハッシュ形式でリスナーを紐づけます（3）。この例では、contextmenuイベントを一つ登録しているだけですが、もちろん、複数のイベントをまとめて登録することも可能です。
イベントリスナーの側では、$eventオブジェクトを介して、preventDefaultメソッドを呼び出すことで、イベント標準の挙動をキャンセルできます（4）。
サンプルを実行して、ページ上でマウスを右クリックしても、コンテキストメニューが表示されないこと、（4）のpreventDefaultメソッド呼び出しをコメントアウトすると、表示されるようになることを、それぞれ確認してください。
