处理NG-点击NG-DBLCLICK与AngularJS在相同的元素 [英] Handling ng-click and ng-dblclick on the same element with AngularJS

问题描述

我一直在寻找单，然后双击事件与AngularJS处理，因为AngularJS始终只触发即使是我们的元素设置NG-DBLCLICK指令中的NG-click事件。

I was looking for both single and double-click event handling with AngularJS, since AngularJS always fires only the ng-click event even if there is ng-dblclick directive set for our element.

下面是一些工作code为那些谁寻求解决办法：

Here is some working code for those who seek solution:

JS：

function MyController($scope) {

    var waitingForSecondClick = false;
    $scope.singleClickAction = function() {

        executingDoubleClick = false;
        if (waitingForSecondClick) {
            waitingForSecondClick = false;
            executingDoubleClick = true;
            return $scope.doubleClickAction();
        }
        waitingForSecondClick = true;

        setTimeout(function() {
            waitingForSecondClick = false;
            return singleClickOnlyAction();
        }, 250); // delay

        /*
         * Code executed with single AND double-click goes here.
         * ...
         */

        var singleClickOnlyAction = function() {
            if (executingDoubleClick) return;

            /*
             * Code executed ONLY with single-click goes here.
             * ...
             */

        }

    }

    $scope.doubleClickAction = function() {

        /*
         * Code executed ONLY with double-click goes here.
         * ...
         */

    };

}

HTML

<div ng-controller="MyController">
    <a href="#" ng-click="singleClickAction()">CLICK</a>
</div>

所以我的问题是（因为我是一个新手AngularJS）：可能有人更experianced写了一些不错的指令来处理这些事件都

So my question is (since I'm an AngularJS newbie): could somebody more experianced write some nice directive for handling those both events?

在我看来最完美的方式是改变NG-点击，NG-DBLCLICK的行为，并添加一些NG-sglclick指令处理单点击仅code。
不知道，甚至有可能，但我觉得每个人都非常有用。

In my opinion the perfect way would be to change the behaviour of ng-click, ng-dblclick and add some "ng-sglclick" directive for handling single-click-only code. Don't know if it is even possible, but I'd find it very useful for everyone.

随时分享您的意见！

推荐答案

您可以只写你自己的。我接过来一看怎么处理，棱角分明的点击和code我发现这里修改了它：<一href=\"http://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately\">Jquery绑定双击和单一的点击单独

You could just write your own. I took a look at how angular handled click and modified it with code I found here: Jquery bind double click and single click separately

<div sglclick="singleClick()" ng-dblClick="doubleClick()" style="height:200px;width:200px;background-color:black">


mainMod.controller('AppCntrl', ['$scope', function ($scope) {
    $scope.singleClick = function() {
      alert('Single Click');
    }
    $scope.doubleClick = function() {
      alert('Double Click');
    }
}])


mainMod.directive('sglclick', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
          var fn = $parse(attr['sglclick']);
          var delay = 300, clicks = 0, timer = null;
          element.on('click', function (event) {
            clicks++;  //count clicks
            if(clicks === 1) {
              timer = setTimeout(function() {
                scope.$apply(function () {
                    fn(scope, { $event: event });
                }); 
                clicks = 0;             //after action performed, reset counter
              }, delay);
              } else {
                clearTimeout(timer);    //prevent single-click action
                clicks = 0;             //after action performed, reset counter
              }
          });
        }
    };
}])

下面是一个例子

Plunker

这篇关于处理NG-点击NG-DBLCLICK与AngularJS在相同的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！