javascript - 将值增加 1，直到使用 Angular 鼠标事件释放鼠标

Question

我有一个 td 范围，它显示一些数值，并且在范围的上方和下方显示 2 个图标(向上/向下箭头)。单击向上箭头可将值增加 1 到 99，单击向下箭头可将值减少 1 直到 0。 ng-click 一切正常。

问题是如果我想将值从 10 增加到 20，我必须单击向上箭头 10 次。我想通过按住向上箭头来完成此操作。它应该不断增加/减少，直到我分别在向上/向下箭头上释放鼠标。

我尝试使用 ng-mousedown 但它增加了 1。有没有办法我可以调用 js 函数直到释放鼠标按钮。

任何指示都会有帮助。

到目前为止我尝试过的代码:

var mouseDown = true;

变量间隔；

$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 没有被打印，但值 false(mousedown 值)会被无限记录。这只是一个测试流程，用于在我将其应用到实际功能之前检查它是否适合我。

控制台的输出:真的1真的1真的1真的1真的1真的1真的1真的163 假

释放鼠标后，错误值在几秒钟内打印了 63 次。我必须刷新页面才能停止它。

Answer 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<--- .