Prevent ng-click="" effect on a disabled button

Question

How can I prevent AngularJS to not click on an HTML button tag that has "disabled" attribute?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" disabled ng-click="something()">No Click Please!</button>

In this case, something() should NOT be called.

Answer 1

You pass an expression that has to be evaluated in the ngClick directive. If it is not evaluated true then something() will not be called.

Heres an example:

(function() {

  angular.module('MyApp', [])
    .controller('MyController', MyController);

  MyController.$inject = ["$scope"];

  function MyController($scope) {

    $scope.disabled = true;

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="MyApp">

  <div data-ng-controller="MyController">

    <button type="button" ng-disabled="disabled" ng-click="disabled || something()">No Click Please!</button>

    <button type="button" data-ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}}</button>

  </div>

</div>

Notice you can also use the ngDisabled directive so that if $scope.disabled is true, something() will not be called and the button will also be disabled!