如何在AngularJS指令中绑定元素上的scroll事件 [英] How to bind scroll event on element in AngularJS directive

问题描述

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

我在$ window上绑定滚动，但现在我需要将它更改为此类.body -wrapper（angular.element（document.queryselector（.body-wrapper））不起作用）。

任何想法？

  angular.element（$ window）.bind（scroll，function（）{
 ... 
}）
  

解决方案

没有理由不应该这个简单的例子表明它确实 -

  var app = angular.module（'plunker'，[]）; 
 app.controller（'MainCtrl'，function（$ scope）{
 angular.element（document.querySelector（'。myDiv'））。bind（'scroll'，function（）{
 alert（'滚动很酷！'）; 
}）
}）; 
  

Plunker示例

如果由于某种原因它无效，请发布完整代码。

讨论后编辑：

最后问题出在滚动的特定事件上，它可能与另一个事件发生碰撞。

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

工作小提琴

How can I bind scroll event on element in AngularJS directive ?

I bind scroll on $window, but now i need to change it to this class ".body-wrapper" (angular.element(document.queryselector(.body-wrapper)) doesn't work) .

Any ideas ?

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

解决方案

No reason it shouldn't work.

This simple example shows it does-

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

Plunker example

if for some reason it is not working, post full code.

Edit after discussion:

Eventually the problem is with the specific event for "scroll", it probably collides with another event.

Changing the event to "mousewheel" did the trick.

Working fiddle

这篇关于如何在AngularJS指令中绑定元素上的scroll事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！