web-dev-qa-db-ja.com

AngularJSディレクティブの要素にスクロールイベントをバインドする方法

AngularJSディレクティブの要素にスクロールイベントをバインドするにはどうすればよいですか？

$ windowでスクロールをバインドしますが、このクラス ".body-wrapper"に変更する必要があります（angular.element（document.queryselector（.body-wrapper））は機能しません）。

何か案は ？

angular.element($window).bind("scroll", function () { 
   ...
})
javascriptangularjsscrollbind
9
Arri

動作しない理由はありません。

この簡単な例では、

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  angular.element(document.querySelector('.myDiv')).bind('scroll', function(){
      alert('scrolling is cool!');
    })
});

プランカーの例

何らかの理由で機能しない場合は、完全なコードを投稿してください。

ディスカッション後に編集：

最終的に問題は「スクロール」の特定のイベントにあり、おそらく別のイベントと衝突します。

イベントを「マウスホイール」に変更すると、うまくいきました。

作業フィドル

12
Ziv Weissman

通常は、そのための新しいディレクティブを作成します。

app.directive('scroll', [function() {
  return {
    link: function (scope, elem, attrs) {
      elem.on('scroll', function (e) {
        // do your thing
      });
    })
  }
}]);

さて、スクロールイベントを追加する必要がある場所でこのディレクティブを使用してください。

<div class='.body-wrapper' scroll></div>

ディレクティブは、angular.elementの代わりに、AngularjsのDOM要素にアクセスするための優先的で簡潔なアプローチです。

11
squgeim

mousewheelイベントは、scrollイベントよりもウィンドウへのスクロールイベントをトリガーします。

angular.element($window).bind('mousewheel', function () {  
  // enter code here  
}
4
Adi

私が見つけた最もクリーンな方法は次のとおりです。

(function() {
  angular
  .module('yourAppName')
  .directive('scrollDirective', ['$window', scrollDirective])

  function scrollDirective($window) {
    return {
      link: function (scope, element, attrs) {
        var handler;
        $window = angular.element($window);

        handler = function() {
          console.log('scrolling....')
        };

        $window.on('scroll', handler);
      }
    };

  };

})();

次に、Htmlで次のように使用できます。

 <div scroll-directive="">a long list goes here</div>
3
heriberto perez