如何在AngularJS指令中绑定元素上的scroll事件

Question

如何在AngularJS指令中绑定元素上的scroll事件？

我绑定$ window上的滚动,但现在我需要将它更改为此类".body-wrapper"(angular.element(document.queryselector(.body-wrapper))不起作用).

有任何想法吗 ？

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

Answer 1

没理由它不应该工作.

这个简单的例子表明它 -

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

Plunker的例子

如果由于某种原因它无法正常工作,请发布完整代码.

讨论后编辑:

最终问题是"滚动"的特定事件,它可能与另一个事件发生冲突.

将事件更改为"鼠标滚轮"就可以了.

工作小提琴

Answer 2

你通常会为此制定新的指令.

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

现在,在需要添加scroll事件的地方使用此指令.

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

指令是访问Angularjs中DOM元素的首选和更简洁的方法,而不是angular.element.