Ren's blog

@rennnosuke_rk 技術ブログです

【Angular】スクロールイベントを監視するDirective

AngularJSでスクロールイベントに伴う処理を実装したかったのですが、スクロールイベントの監視をビジネスロジックに記述したくなかったので、画面のスクロールイベントを監視させるAngularのDirectiveを作成しました。

Directive

angular.module('App')
.directive('ngScroll',[
  '$window',
  function($window){
    return {
      scope:{
         // ng-scrollの右辺値が関数であることを指定
         // compileプロパティの関数が返す関数の引数$scopeに格納
        ngScroll : '&'
      },
      compile: function(element, attrs) {
        return function($scope, element, attrs) {
          angular.element($window).bind('scroll', function(){
            // ng-scrollの右辺値に指定した関数を呼び出し
            $scope.ngScroll($window);
          });
        }
      }
    }
}]);

Controller

angular.module('App', [])
.controller('MainController', [
  '$scope',
  function($scope){
      $scope.onScroll = function() {
          console.log('scroll');
      }
}]);

HTML

<body ng-controller='MainController'>
    <div ng-scroll="onScroll()"></div>
</body>

directiveを定義したタグを含むページのスクロールを監視できます。
これで、ビジネスロジック側はスクロール時の挙動定義に集中できます。