Question

我想使用这个mousewheel指令：https://github.com/monospaced/angular-mousewheel

它的文档告诉要么将它作为属性或类附加到元素，

但我想在我自己的指令中附上它。

var myDirective = function() {
    return {
        link: function($scope, elem) {
            elem.bind('>>here<<', function(){});

怎么做？

Answer 1

我怀疑该指令不能以你想要的方式使用。但是，查看angular-mousewheel source，如果您包含Hamster.js，则可以执行以下操作：

link: function(scope, element) {
  var hamster = $window.Hamster(element[0]);
  hamster.wheel(function(e, delta, deltaX, deltaY) {
    // React to wheel event here
  });
}

Answer 2

将指令添加到您自己的指令模板中：

.directive('mwTemplate', function(){
  return {
    restrict: 'AC',
    scope: {},
    controller: function($scope){
      $scope.scroll = function($event, delta, deltax, deltay) {
        console.log($event, delta, deltax, deltay);
      }
    },
    template: '<div msd-wheel="scroll($event, delta, deltax, deltay)">Scroll over top of me</div>'
  };
})

...或将其添加到指令的编译功能中：

.directive('mwCompile', function(){
  return {
    restrict: 'AC',
    scope: {},
    compile: function(elem){
      elem.find('div').attr('msd-wheel', 'scroll($event, delta, deltax, deltay)');
    },
    controller: function($scope){
      $scope.scroll = function($event, delta, deltax, deltay) {
        console.log($event, delta, deltax, deltay);
      }
    },
    template: '<div>Scroll over top of me</div>' 
  };
})

Plunkr

Answer 3

老问题，但它可以帮助有人读这个：

element[0].addEventListener('DOMMouseScroll', _onWheel, false ); // For FF and Opera
element[0].addEventListener('mousewheel', _onWheel, false ); // For others

function _onWhell(e) {
    // Do what you want here
}

我们需要使用element[0]，因为您的原始DOM元素被包装到另一个对象中。

如何bind（）到指令形式的鼠标滚轮事件

3 个答案: