2013-12-06 9 views
1

У меня есть td span, который отображает некоторое числовое значение, и у меня есть 2 значка (стрелка вверх/вниз), показанная выше и ниже диапазона. Нажатие на стрелку вверх увеличивает значение на 1 до 99, а нажатие на стрелку вниз уменьшает значение на 1 до 0. Все работает нормально с ng-click.Увеличьте значение на 1 до тех пор, пока мышь не выйдет с использованием событий угловой мыши

Проблема в том, что если я хочу увеличить значение, скажем от 10 до 20, я должен нажать стрелку вверх 10 раз. Я хочу сделать это, продолжая нажимать мышь на стрелку вверх. Он должен продолжать увеличиваться/уменьшаться до тех пор, пока я не вытащу мышью стрелку вверх/вниз соответственно.

Я пробовал использовать ng-mousedown, но он увеличивается на 1. Есть ли способ, которым я могу вызвать функцию js до тех пор, пока не будет отпущена кнопка мыши.

Любые указатели будут полезны.

Код я пытался до сих пор:

вар MouseDown = истина;

var интервал;

$scope.keepPressing = function(){ 

    mouseDown = true; 
    if (mouseDown){ 
     doSome(); 
    } 

}; 
function doSome(){ 
    console.log(mouseDown); 
    if (mouseDown){ 
     console.log(1); 
     interval = setInterval(doSome, 1000); 
    } 
} 

$scope.isMouseDown = function(){ 

    clearInterval(interval); 
    mouseDown = false; 
}; 

HTML:

Проблема с этим даже при том, что стоимость 1 не печатается, когда я отпустить кнопку мыши, значение ЛОЖЬ (MouseDown значение) становится авторизовались бесконечно. Это просто тестовый поток, чтобы проверить, работает ли он для меня, прежде чем применять его к моей фактической функции.

Выход из консоли: истинная истинно истинно истинно истинно истинно истинно истинно 63 ложные

После того, как я отпустите мышь, ложное значение будет напечатано 63 раза в течение нескольких секунд. Мне нужно обновить страницу, чтобы остановить ее.

+0

Подумайте, что вы хотите использовать $ timeout для вызова некоторой функции с интервалом, а затем просто иметь логический флаг, в котором вы отслеживаете, если мышь отсутствует или нет (или еще лучше запустить и остановить функцию $ timeout на основе вызова на событиях мыши/вверх) – shaunhusain

ответ

1

Вот директива, которая позволяет устанавливать свой собственный временной интервал и шаг:

.directive('changingValue', function(){ 

return { 

    scope : { 
    changingValue :"=", 
    changingValueStep : "@", 
    changingValueInterval : "@" 
    }, 
    link : function(scope, element, attrs) { 

    var step = attrs.changingValueStep; 
    if(!step)step = 1; 
    else step = parseInt(step); 

    var interval = attrs.changingValueInterval; 
    if(!interval)interval = 500; 
    else interval = parseInt(interval); 

    console.log("step", step, "interval", interval); 

    var pressed = false; 

    function changeValue() { 
     if (pressed) { 
      setTimeout(
      function() { 
       console.log(scope.changingValue); 
       scope.changingValue += step; 
       scope.$apply(); 
       changeValue(); 
      }, interval 
     ) 
     } 

    } 

    element.on("mousedown", function() { 
     pressed = true; 
     changeValue(); 
    }); 

    element.on("mouseup", function() { 
     pressed = false; 
    }); 


    } 

} 

В принципе он может быть использован как то:

<div changing-value="counter" changing-value-step="-1" changing-value-interval="200">-</div> 

И здесь работает --->PLNKR<---.

+0

Директива работает. Однако я хотел сделать это через функцию js, так как моя логика для increment & decment является сложной.Похоже, он работал с $ timeout с событиями mousedown/mouseup, как было предложено hussain. –

0

Вот что я сделал и работал для меня.

var interval; 
scope.mousePress = function(){ 
    doSome(); 
    } 
}; 
var doSome = function { 
    increaseValue(); // separate function where all the increment logic resides. 
    interval = $timeout(doSome, 1000); 
} 

scope.mouseRelease = function(){ 
    $timeout.cancel(interval); 
}; 

В HTML, вызовите mousePress & mouseRelease функции из-нг MouseDown & нг-MouseUp соответственно.

Смежные вопросы