CodeZine(コードジン)

特集ページ一覧

AngularJSアプリ開発に役立つ小粒なライブラリ ~ ストレージ/イベント処理/入力値検証

AngularJSアプリ開発を支援する便利モジュール(10)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/02/04 14:00
目次

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();
    };
  }]);
preventDefaultメソッドが有効な場合(左)/無効な場合(右)
preventDefaultメソッドが有効な場合(左)/無効な場合(右)

 UI Eventを利用するには、ライブラリ本体(event.min.js)をインポートした上で、アプリモジュール(myApp)からはui.eventモジュールへの依存関係を宣言します(2)。

 あとは、ui-event属性で「イベント名: リスナー」のハッシュ形式でリスナーを紐づけます(3)。この例では、contextmenuイベントを一つ登録しているだけですが、もちろん、複数のイベントをまとめて登録することも可能です。

 イベントリスナーの側では、$eventオブジェクトを介して、preventDefaultメソッドを呼び出すことで、イベント標準の挙動をキャンセルできます(4)。

 サンプルを実行して、ページ上でマウスを右クリックしても、コンテキストメニューが表示されないこと、(4)のpreventDefaultメソッド呼び出しをコメントアウトすると、表示されるようになることを、それぞれ確認してください。


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

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5