AngularJS イベント

AngularJS は独自の HTML イベントインストラクションを持っています。

AngularJS イベント

以下のいずれか一つまたは複数のインストラクションを使用して、HTML要素に AngularJS イベントリスナーを追加できます：

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

イベントコマンドは、特定のユーザーエベントで AngularJS 関数を実行するのを許可します。

AngularJS イベントは HTML イベントをオーバーライドしません。両方のイベントが実行されます。

マウスイベント

要素に光標が移動したとき、以下の順序でマウスイベントが発生します：

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

または、要素がマウスクリックされたときには、以下の順序でトリガーされます：

  • ng-mousedown
  • ng-mouseup
  • ng-click

どの HTML 要素にもマウスイベントを追加できます。

インスタンス

マウスが H1 要素の上に移動したとき、count 変数を増やします：

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">マウスを上に持って！</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

自分で試してみる

ng-click ディレクティブ

ng-click ディレクティブは、要素がクリックされたときに実行される AngularJS コードを定義します。

インスタンス

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">クリックして！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

自分で試してみる

関数を参照することもできます：

インスタンス

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">クリックして！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

自分で試してみる

切り替え、真/偽

もし、ボタンをクリックしたときに一部のHTMLコードを表示し、もう一度クリックすると隠す、ダウンメニューのようにしたい場合は、ボタンをスイッチのように動作させる必要があります：

クリックして

インスタンス

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">クリックして！</button>  
<div ng-show="showMe">  
  <h1>メニュー：</h1>  
  <div>ピザ</div>  
  <div>パスタ</div>  
  <div>魚介類</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

自分で試してみる

showMe 変数は開始時にブール値です。 falseを使用して呼び出します。

myFunc 関数を !（非）演算子、 showMe 変数をその現在の値の逆に設定することができます。

$event オブジェクト

関数を呼び出すときには、 $event オブジェクトを引数として渡します。

$event オブジェクトはブラウザのイベントオブジェクトを含んでいます：

インスタンス

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">マウスを上に持ってくれ！</h1>
<p>座標: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

自分で試してみる