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); 
}