Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【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...");
);

参考文献

angular.element | AngularJS 1.2 日本語リファレンス | js STUDIO