Question

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

我在$ window上绑定滚动，但现在我需要将它更改为此类＆＃34; .body-wrapper＆＃34; （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 example

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

讨论后编辑：

最终问题出在＆＃34;滚动＆＃34;的特定事件，它可能与另一个事件发生碰撞。

将事件更改为＆＃34;鼠标滚轮＆＃34;做了伎俩。

Working fiddle

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

mousewheel 事件会触发滚动事件到窗口而非滚动事件。

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

Answer 4

我找到的最干净的方式是：

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

如何在AngularJS指令

4 个答案: