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

7 min read - Apr 18, 2022

What is Next.Js? Is Next.JS the Next Big Thing in App Development?

Looking for a better way of web development or thinking of changing your website to Next.js? This blog will tell...

9 min read - Apr 12, 2022

How to Hire a Flutter developer? Must Need Skills, Salaries and More

A comprehensive guide for young entrepreneurs on how to hire the right flutter developer for your startups

12 min read - Sep 01, 2021

Node.js Vs. Python- Know the Best Technology to Develop Your Project in 2022

Node.js and Python have the same purpose and goals but have different features and capabilities. Read this blog to choose...

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!