Skip to content

Prevent Double or Multiple Click in Angular 1.x

A preventive code to help developers avoid multiple clicks in angular 1.x

Web
Feb 17, 2017
1 min read

faiz.m

Prevent Double or Multiple Click in Angular 1.x

Below, I have created a directive, which affects the parent scope and attaches each target button element (see oneClickOnly[attr.ocoId]).

The directive code is below

    angular.module('app').directive('oneClickOnly', [  
      '$parse', '$compile', function($parse, $compile) {
        return {
          restrict: 'A',
          scope: false, // get the parent scope directly
          compile: function(element, attr) {
            var fn = $parse(attr['oneClickOnly']);
            return {
              pre: function(scope, element, attr) {
                scope.oneClickOnly = scope.oneClickOnly || {}
                scope.oneClickOnly[attr.ocoId] = scope.oneClickOnly[attr.ocoId] || {}
                scope.oneClickOnly[attr.ocoId].fn = function(value) {
                  scope.oneClickOnly[attr.ocoId].val = value
                  if(value) {                
                    element.text(attr.ocoTextWait)
                    element.attr('disabled', true)
                  } else {
                    element.text(attr.ocoText)
                    element.attr('disabled', false)
                  }
                }
                var clickingCallback = function(e) {
                  if(scope.oneClickOnly 
                    && scope.oneClickOnly[attr.ocoId]
                    && scope.oneClickOnly[attr.ocoId].val) {
                    return
                  }              
                  scope.oneClickOnly[attr.ocoId].fn(true)
                  fn(scope, { $event: e });
                };
                element.bind("click", clickingCallback)
              }
            }
          }
        }
      }
    ])
`
**The html would change as below**  
_note - ng-click is not required_

    <md-button class="md-raised md-primary" oco-id="addCenter"  
      oco-text="Save" oco-text-wait="Saving" 
      one-click-only="doAsyncProcess()">

**The controller would be**

    onCompleteOfAsyncProcess() {  
      // addCenter should be same as oco-id
      $scope.oneClickOnly['addCenter'].fn(false)
    }

Pushing the Boundaries of Digital Engineering

Submit your email to get all the top blogs, insights and guidance your business needs to succeed!

Related Blogs

2 min read - Jun 10, 2022

Next.js vs React: Which is the Best Front-end Platform for Your Project [Infographic]

This infographic compares React and Next.js to help you understand the difference between the two major frameworks and how to...

8 min read - Apr 20, 2023

Mastering PyQt: An Overview of Python Bindings for Qt Toolkit

Explore the world of PyQt and create powerful GUI applications with Python. Start your journey to mastering PyQt today!

8 min read - Feb 24, 2021

The Role of Artificial Intelligence in the Web Development Process

Get a deeper understanding of how AI influences the web development process.

View all

OUR OFFICE

India

Pattom, Trivandrum, India, 695 004

Usa

7533 S CENTER VIEW CT # 4592, WEST JORDAN, UT 84084 US

Uk

208, Uxbridge RD, Shepherd’s Bush W12 7JD, UK

Let’s talk! We’re ready

Start your digital transformation journey with us now!