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