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

Мне нужно вызвать его каждый раз, когда метод вызывается вместо одного раза из-за того, как работает мое угловое приложение.

увлечение работает отлично

проблема заключается в том, что каждый раз, когда метод вызывается - новое событие добавляется в дополнение к предыдущим событиям ..

смысл:

первого метода является называют - волочение напечатает в консоль:

"drag was done!!" 

второй метод вызывается, на одном сопротивление:

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

п метод времени вызывается, на одном сопротивление:

"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

Вам необходимо отвязать событие щелчка, когда контроллер будет уничтожен

Угловой 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); 
}