This directive will prevent double click events on any element. Just a few simple lines give you full control.
You can install an angular-no-dblclick package very easily using Bower:
bower install angular-no-dblclickAnd add the file to your index page:
<script src="angular-no-dblclick/dist/no-dblclick.js"></script>Finally add 'noDblclick' to your main module's list of dependencies:
angular.module('myApp', [
...
'noDblclick',
...
]);To get it working simply add the attribute no-dblclick to your element:
<button no-dblclick>Click me!</button>Optionally, you can add a key for reference:
<button no-dblclick="myKey">Click me!</button>The element will be disabled after the very first click.
Note: When the key is specified, the directive will broadcast $scope.$broadcast('noDblclick.lock', 'myKey'); on the rootscope locking all directives with the same key.
To release all elements in the scope just broadcast this event:
$scope.$broadcast('noDblclick.unlock');The second argument is optional. To release a single locked element simply broadcast on your scope with the key:
$scope.$broadcast('noDblclick.unlock', 'myKey');To release all elements in your application at once:
$Rootcope.$broadcast('noDblclick.unlock');Actually this works the same as releasing element(s):
To lock a element:
$scope.$broadcast('noDblclick.lock', 'myKey');To lock all directives in the scope:
$scope.$broadcast('noDblclick.lock');To lock all directives:
$Rootcope.$broadcast('noDblclick.lock');