当鼠标在 AngularJS 中的按钮上按下时，如何继续调用 $broadcast？

Question

我目前有一个表单按钮

<button id="scale-up" ng-click="scaleUp()">Scale Up</button>

其中 "scaleUp()" 只是

$scope.scaleUp = () => { $scope.$broadcast('scaleUp'); };

我不想只调用 "scaleUp()" 一次，而是希望在鼠标按下按钮时继续广播 'scaleUp'。 ex) 鼠标按下 5 秒，然后应该调用 $scope.$broadcast('scaleUp') 10 次。

实现这个的正确方法是什么？没有 jQuery 解决方案，请。

Answer 1

与 AngularJS 中的所有内容一样，有不止一种方法可以做到这一点，但这里有一个使用 $interval、ng-mousedown 和 ng-mouseup

的不错的解决方案

想法是设置间隔，每 0.5 秒在按下鼠标 (ng-mousedown) 时持续广播，直到您释放按钮 (ng-mouseup)，然后清除间隔。

HTML:

    <button ng-mousedown="broadcastStuff()" ng-mouseup="stopBroadcasting()">
        Test
    </button>

    <h3>
        {{ h2test }}
    </h3>

JS:

  const broadcastDate = () => {
     $scope.$broadcast('scaleUp', new Date());
  };

  $scope.$on('scaleUp', (event, newVal)=>{
    $scope.h2test = newVal;
  })

  $scope.broadcastStuff = () => {
    $scope.stopInterval = $interval(broadcastDate, 500);

  }
  $scope.stopBroadcasting = () => {
     $interval.cancel($scope.stopInterval);
  };

我为你创造了fiddle：

https://jsfiddle.net/pegla/n7s1c9u0/1/

当鼠标在 AngularJS 中的按钮上按下时，如何继续调用 $broadcast？

How do I keep calling $broadcast while mouse is down on a button in AngularJS?

mouse

frontend

click

broadcast

angularjs