参考にさせて頂いたページ
AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう (1/3):CodeZine(コードジン)
ng-app.jsの記述内容
例として以下の通り。
// myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録 app.controller('SampleCtrl', function($scope) { // onclickメソッドを定義 $scope.onclick = function($event) { console.log($event); console.log($event.path[0]); console.log($event.srcElement.nextElementSibling); }; });
index.htmlの記述内容
例として以下の通り。
<div ng-controller="SampleCtrl"> <button ng-click="onclick($event)">ボタン</button> <p>nextElementSiblingです。</p> </div>
このソースコードについて
ng-click属性が付与されたbutton要素をクリックすることによって、$eventを引数としてonclickメソッドが実行される。
$eventオブジェクトはconsole.log($event);としたらわかるように、色々なプロパティを保持している。
以下のような感じで、プロパティが取得できる。
console.log($event.path[0]); console.log($event.srcElement.nextElementSibling);