Daimz Daimz - 1 year ago 88
AngularJS Question

How can I listen for a click-and-hold in AngularJS?

I have made a time conter which allows you to increase or decrease the time by clicking a button. I would like however that when I click and hold the button the value of the time would keep climbing.

So currently if you see my Plunkr each time I click the up button the value increases but I want this so when I hold the button down the value increases

until I release the button.

How could I achieve something like this?

Answer Source


<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 class="btn btn-default" ng-click="Time = Time - 1">
    <i class="fa fa-caret-down"></i>

Use ng-mouseDown and ng-mouseup directive with $interval

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

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


        scope.mouseUp = function () {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download