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

【问题标题】：How do I keep calling $broadcast while mouse is down on a button in AngularJS?当鼠标按下AngularJS中的按钮时，如何继续调用$broadcast？
【发布时间】：2019-07-14 17:28:08
【问题描述】：

我目前有一个表单按钮

<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 解决方案。

【问题讨论】：

标签： angularjs click frontend mouse broadcast

【解决方案1】：

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

想法是设置间隔，在鼠标按下 (ng-mousedown) 时每 0.5 秒保持一次广播，直到您释放按钮 (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);
  };

我为你制作了小提琴：

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

【讨论】：