Angular.js: ng-click still fires when div is (ng)disabled

I’m not sure if this is considered a bug in Angular.js or not, but after much hunting I found a work-around.

The idea is to disable a button after it has been clicked to prevent button mashing. But a lot of the buttons in Ideal Candidate have been designed using plain <div> tags. Not sure if that’s a good or bad idea – I’m not a UI guy – it is what it is.

The basic problem is ng-disabled works fine for buttons:

<button ng-click="do_something()" ng-disabled="button_clicked">Click Me</button>
angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
    $scope.button_clicked = false;
    $scope.do_something = function() {
        $scope.button_clicked = true;
        return false;

But if you change your button to a <div> the ng-disabled flag no longer works. It will set the element to disabled, but it won’t prevent the ng-click from firing if you mash the button.

The simple solution is to change your ng-click attribute to check the parameter:

<div ng-click="button_clicked || do_something()" ng-disabled="button_clicked">Click Me</div>

This works perfectly.


7 thoughts on “Angular.js: ng-click still fires when div is (ng)disabled

  1. sai says:

    Awesome, thanks for sharing this!!

    Observed this issue in Chrome. I have images with ng-click and ng-disabled. When disabled is set to true, works perfectly fine in IE whereas, the click event was still getting fired in Chrome.

    Your solution perfectly worked for me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s