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

Question

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

我在$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!');
    })
});

普伦克示例

如果由于某种原因它不起作用，请发布完整代码。

讨论后编辑：

最终问题出在"滚动"的特定事件上，它可能与另一个事件发生冲突。

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

工作小提琴

Answer 2

您通常会为此制定一个新指令。

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

现在，在需要添加滚动事件的任何位置使用此指令。

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

指令是在 Angularjs 中访问 DOM 元素的首选和更干净的方法，而不是angular.element 。

Answer 3

我发现的最干净的方法是：

(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>

Answer 4

鼠标滚轮事件触发窗口的滚动事件比滚动事件触发

。

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