【AngularJS】AngularJSで動的にイベントハンドラを定義する
AngularJSのモジュールを使い、動的にイベントハンドラーを追加する方法メモ。
// controller angular.module('myApp',[]) .controller('myController',[ '$window', function($window){ // 画面全体に対するクリックリスナー angular.element($window).bind('click', function(){ console.log('click...'); }); // スクロールリスナー angular.element($window).bind('scroll', function(){ console.log('scrolling...'); }); // 組み込みの要素参照を使っても定義可能 angular.element(document.getElementById('hoge')).bind('click', function(){ console.log('click...'); }); } ]);
上記コードでは、windowオブジェクトに対してクリックイベントやスクロールイベントのリスナーを登録しています。
$window
AngularJS 1.2 日本語リファレンス | js STUDIOより
ブラウザのwindowオブジェクトを参照します。
JavaScript組み込みオブジェクトでもあるwindowへの参照をもつ、Angularの変数。
angular.element
素のDOM要素、またはHTML文字列をjQuery要素としてラップします。 もし、jQueryが利用可能であれば、angular.elementはjQuery関数へのエイリアスになります。 そうでなければ、angular.elementは、"jQuery lite"また は"jqLite"と呼ばれる、 Angular組み込みのjQueryのサブセットに委譲します。
JQueryが使える環境であれば、JQueryのラッパーになるようです。
使えない環境でもAngularJSに組み込まれている軽量なDOM操作ライブラリを使ってくれる模様。
angular.element.bind
要素に任意のイベントで実行させたい関数を紐づけます。
JQueryで書く場合
$('window').on('click', function(){ console.log("click..."); ); $('window').on('scroll', function(){ console.log("click..."); );