公開日

2015/07/20

最終更新

2017/11/25

記事区分

一般公開

イベントディレクティブ

以下のテンプレートで 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>

くろねこパンケーキ

Javaが得意なエンジニア。美しいコードと効率的なデザインを追求しています。

記事の執筆者にステッカーを贈る

有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、記事の読者は、執筆者に有料のステッカーを贈ることができます。

さらに詳しく →

Feedbacks

ログインするとコメントを投稿できます。

AngularJS 公式ドキュメントの利用例
AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
したくん11/10/2017に更新
0
- AngularJS
- JavaScript
ルーティングを定義してシンプルな SPA を構築 (AngularJS)
AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。サンプルコード index.html <!DOCTYPE html> <html lang...
カラフ11/27/2017に更新
0
- AngularJS
- JavaScript
DOM 操作ディレクティブ (AngularJS)
AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
こもれびさん10/7/2021に更新
0
- AngularJS
- JavaScript
フィルター (AngularJS)
AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
だいふくうさぎ10/7/2021に更新
0
- AngularJS
- JavaScript
HTTP 通信 (AngularJS)
AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...
ほんわかパンダ11/30/2017に更新
0
- AngularJS
- JavaScript

イベントディレクティブ (AngularJS)

目次