2014-12-05 139 views
0

是否有模拟鼠标事件的指令?模拟mouseenter的Angular指令?

我试过寻找一个,但我发现的所有命令都是将一个函数绑定到鼠标上方的指令或业力测试模拟鼠标。

我的使用案例是,我准备好了一个绑定到鼠标的事件,但我正在寻找simulate-mouse ="shouldBeMouseOver"形式的指令,这样当$scope.shouldBeMouseOver为真时,我将指令置于该指令上,就好像它有反应一样鼠标事件。

+1

不会是简单的使用范围变量,如'NG东西“类”? – charlietfl 2014-12-05 15:29:00

+0

还有其他的行为,我不能改变的元素,这就是为什么我要绕模拟鼠标的路线。 – 2014-12-05 15:30:19

+0

你将不得不创建一个事件对象,然后包括坐标并触发mouseover – charlietfl 2014-12-05 15:31:54

回答

2

UPTATE! 以前的解决方案是一种解决方法。您现在可以使用角度指令(https://docs.angularjs.org/api/ng/directive/ngMouseenter)。

ng-mouseenter="handler()" 

以前的解决方案(解决方法)

HTML:

<div simulate-mouse eventhandle="objfromscope">Hover</div> <!-- objfromscope: true or false --> 
    <div ng-click="objfromscope=!objfromscope">Enable/Disable hover</div> 

指令

app.directive('simulateMouse', function() { 
    return { 
     restrict: 'AE', 
     scope: { 
      eventhandle : '=eventhandle' //eventhandle is two way data binded 
     }, 
     link: function(scope, element, attrs) { 

      scope.$watch(function() { 
        return scope.eventhandle; 
       }, function(newValue) { 
        console.log(newValue) 
        if(newValue){ 
        element.off("mouseenter").on("mouseenter",function(){ 
          onMouseOverCall() 
         }); 
       }else{ 
        element.off("mouseenter"); 
       } 

       }); 

      var onMouseOverCall = function(){ /* called only when eventhandle is true */ 
       console.log("hoho") 
      } 
     } 
    }; 
});