Prevent multiple clicks on a button in AngularJs

This is “one of those” errors for me. It comes up from time to time and is always an annoying little time waster. I’ve recently has had to fix this problem in our angular app. After having several different approaches all over our project that all kinda worked, I decided to get it sorted once and for all.

This directive which is an alternative to ng-click was what I settled on in the end.

.directive('oneClickOnly', [
 '$parse', '$compile', function($parse, $compile) {
    return {
        restrict: 'A',
        compile: function(tElement, tAttrs) {

            if (tAttrs.ngClick)
                throw "Cannot have both ng-click and one-click-only on an element";

            tElement.attr('ng-click', 'oneClick($event)');
            tElement.attr('ng-dblclick', 'dblClickStopper($event)');

            tElement.removeAttr('one-click-only');
            var fn = $parse(tAttrs['oneClickOnly']);

            return {
                pre: function(scope, iElement, iAttrs, controller) {
                    console.log(scope, controller);
                    var run = false;
                    scope.oneClick = function(event) {
                        if (run) {
                            throw "Already clicked";
                        }
                        run = true;
                        $(event.toElement).attr('disabled', 'disabled');

                        fn(scope, { $event: event });

                        return true;
                    };
                    scope.dblClickStopper = function(event) {
                        event.preventDefault();
                         throw "Double click not allowed!";
                        return false;
                    };

                    $compile(iElement)(scope);
                }
            };
        },
        scope: true
    };
 }
])

In a nutshell
1. In the compile function body of the directive
– Make sure ng-click isn’t already enabled.
– Compile the function passed into my directive
– Add a function oneClick to the ng-click (will define that bit later)
2. In the pre-compile part of the return
– Define a oneClick function and a double click disable function on the scope so that it is ready when the compile happens.
3. Configure oneClick function
– Keep a boolean flag to set to true once it is clicked.
– Add the disabled attribute to the element once clicked.

And here is the jasmine test

'use strict';
describe("The One click button directive", function() {
var $scope, testButton, $compile, clickedEvent;
var counter = 0;

beforeEach(function () {
    counter = 0;

    module('shared.form.validation');

    inject(function ($rootScope, _$compile_) {

        $compile = _$compile_;
        $scope = $rootScope.$new();

        $scope.clickEvent = function (event) {
            counter++;
        };
    });
});

it("prevents a button from being clicked multiple times", function () {

    var html = "<a one-click-only='clickEvent()'>test button</a>";
    testButton = $compile(html)($scope);

    $scope.$digest();

    testButton.click();
    expect(function () { testButton.click(); }).toThrow("Already clicked");

    expect(counter).toBe(1);
});

it("doesn't allow ng-click on the same tag", function() {
    var html = "<a ng-click='clickEvent()' one-click-only='clickEvent()'>test button</a>";
    expect(function () { $compile(html)($scope); }).toThrow("Cannot have both ng-click and one-click-only on an element");
});

it("works for multiple buttons on the same scope", function () {

    var counter2 = 0;
    $scope.clickEvent2 = function (event) {
        counter2++;
    };

    var html = "<a one-click-only='clickEvent()'>test button</a>";
    var html2 = "<a one-click-only='clickEvent2()'>test button</a>";
    testButton = $compile(html)($scope);
    var testButton2 = $compile(html2)($scope);

    $scope.$digest();

    testButton.click();
    expect(function () { testButton2.click(); }).not.toThrow("Already clicked");

    expect(counter).toBe(1);
    expect(counter2).toBe(1);
});
});

Leave a Reply

Your email address will not be published. Required fields are marked *