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

8 min read - Mar 24, 2022

Top 8 Emerging Healthcare Technology Trends for 2023

Learn the latest and emerging technology trends in the healthcare sector that you can embrace now as a healthcare startup.

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...

6 min read - Jul 24, 2017

Roadmap to Lightning Fast Websites

Bid adieu to buffering and, improve your website load speed with our roadmap to lightning fast websites.

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!