JQuery + AngularJS：mousedown事件被多次调用

Question

我有一个角度单一的页面应用程序。

所以我写了一个自己，我不能使用jquery可拖动的方法 -

// here I am setting the drag event to a div 
var enableDrag = function(id){ 
     $('#'+id).on('mousedown',handleMousedown); 
} 

var handleMousedown =function (e){ 
    window.my_dragging = {}; 
    my_dragging.pageX0 = e.pageX; 
    my_dragging.pageY0 = e.pageY; 
    my_dragging.elem = this; 
    my_dragging.offset0 = $(this).offset(); 
    var isDragAction=false; 
    function handle_dragging(e){ 
     isDragAction=true; 
     var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0); 
     var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0); 
     $(my_dragging.elem) 
      .offset({top: top, left: left}); 
    } 
    function handle_mouseup(e){ 
     $('body') 
      .off('mousemove', handle_dragging) 
      .off('mouseup', handle_mouseup); 
     if(isDragAction){ 
      console.log("drag was done!!"); 
     } 
     else{ 
      console.log("click was done!!"); 
     } 

    } 
    $('body') 
     .on('mouseup', handle_mouseup) 
     .on('mousemove', handle_dragging); 
} 

而在我的方法，我呼吁这个是这样的：

//set off the last mousedwon to the div 
    $("someDiv").off('mousedown',handleMousedown); 
    //set the mousedwon to the div 
    enableDrag("someDiv"); 

我每次都需要调用它的方法被称为而不是一次，因为我的角度应用程序是如何工作的。

拖动工作正常

问题是每一个方法被调用一次 - 除了以前的事件被添加一个新的事件..

含义：

第1种方法是被称为 - 拖动将打印到控制台：

"drag was done!!" 

第二个方法被调用，在一个单一的阻力：

"drag was done!!" 
"drag was done!!" 

n个时间方法被调用，在单个拖动：

"drag was done!!" 
"drag was done!!" 
. 
. 
. 
"drag was done!!" 

什么累积的事件或导致此多次打印??

感谢

Answer 1

尽量确保事件通过它，而不是单独做这件事之前删除它设置一次。不知道这是问题，因为我没有在你的例子中测试它。

var enableDrag = function(id) { 
    $('#'+id).off('mousedown').on('mousedown', handleMousedown); 
} 

Answer 2

我真的认为这种操作应该是在工厂或服务，因为两者都是，而控制器可以被初始化多次，每个应用程序执行初始化一次单身。另一种解决方案将在控制器中把

$scope.$on('$destroy', function(){ 
    //unbind event 
    $('#someDiv').unbind('mousedown', handleMousedown); 
}); 

Answer 3

您需要解除绑定click事件时，控制器被破坏

角1.4

scope.$on(
    "$destroy", 
    function handleDestroy() { 
     $('#someDiv').unbind('mousedown', handleMousedown); 
    } 
); 

角1.5

this.$onDestroy = function() { 
    $('#someDiv').unbind('mousedown', handleMousedown); 
}; 

角2

ngOnDestroy() { 
    $('#someDiv').unbind('mousedown', handleMousedown); 
}