Translator: Iron Fat man

I wonder if this is a bug in angular.js. But a bit of research led to a workaround.

The business requirement is that the button is disabled after being clicked once to prevent multiple invalid clicks. But many frameworks now use

or other tags to implement the button effect. I’m not a professional UI, so I don’t know if this is a good idea or not.

Ng-disabled works fine on 

<button ng-click=""do_something()"" 
	ng-disabled=""button_clicked"">Click Me</button>
Copy the code

The related logic code is as follows:

angular.module('ngToggle', []) .controller('AppCtrl',['$scope', function($scope){ $scope.button_clicked = false;  $scope.do_something = function() { alert(""Clicked!""); $scope.button_clicked = true; return false; } }]);Copy the code

But changing button to

disables the ng-disabled flag. It sets the element to disabled, but it still fires ng-click when clicked.

Check the value of the argument in ng-click:

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

Very simple and very effective, a short circuit or. Short circuit or | | operation rule is, if the left of the expression is true, it returns true, no longer calculate the right expression.

Welcome to join: CNC open source component development exchange group 316630025

Original link: baudehlo.com/2014/02/24/…

Original date: February 24, 2014

Translation Date: January 07, 2016

Translator: iron anchor at http://blog.csdn.net/renfufei