我怎样才能在AngularJS中听取点击并保持?

Dai*_*imz 12 javascript angularjs angularjs-directive

我做了一个时间,让你通过点击按钮增加或减少时间.但是,当我点击并按住按钮时,我希望时间的价值会继续攀升.

所以目前如果你看到我的Plunkr每次单击向上按钮时值都会增加,但是我想这样,所以当我按下按钮时,值会增加,1,2,3,4,5,6,7,8直到我释放按钮.

我怎么能做到这样的事情?

Dar*_*n P 25

DEMO

<span class="time">{{ Time | timeFilter }}</span>
<div class="btn-group btn-group-sm">
  <button class="btn btn-default" ng-mousedown='mouseDown()' ng-mouseup="mouseUp()">
    <i class="fa fa-caret-up"></i>
  </button>
  <button class="btn btn-default" ng-click="Time = Time - 1">
    <i class="fa fa-caret-down"></i>
  </button>
</div>
Run Code Online (Sandbox Code Playgroud)

使用带$ interval的ng-mouseDown和ng-mouseup指令

app.directive('time', function ($interval) {
   return {
      templateUrl: 'time.html',
      restrict: 'E',
      scope: {
        Time: '=value'
      },
      link: function (scope, element, attrs) {
        element.addClass('time');

        var promise;      
        scope.mouseDown = function() {
          if(promise){
             $interval.cancel(promise);
          }
          promise = $interval(function () { 
            scope.Time++;
          }, 100);

        };

        scope.mouseUp = function () {
           $interval.cancel(promise);
           promise = null;
        };
     }
  };
});
Run Code Online (Sandbox Code Playgroud)

  • 如果鼠标在鼠标按钮关闭时离开元素,则当鼠标按钮重新启动时,间隔将不会被取消.要解决这个问题,你可以添加`ng-mouseleave ='mouseUp()'` (11认同)