Question

如何防止AngularJS点击已禁用＆＃34;禁用的HTML按钮标记＆＃34;属性？

＆＃13;

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

＆＃13;

在这种情况下，不应该调用something（）。

Answer 1

传递必须在ngClick指令中计算的表达式。如果未评估为true，则不会调用something()。

以下是一个例子：

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

请注意，您也可以使用ngDisabled指令，这样如果$scope.disabled为真，则不会调用something()，也会禁用该按钮！

Answer 2

正确的方法是使用ng-disabled这是角度中的默认指令，并使用范围变量来处理它以使其禁用，

<强> HTML：

 <button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">No Click Please!</button>

<强> JS：

    $scope.isDisabled = false;
    $scope.disableClick = function() {
        alert("Clicked!");
        $scope.isDisabled = true;
        return false;
    }

修改

正如提到的papakia，检查布尔变量和函数，以便它不会被执行。

DEMO APP

Answer 3

此解决方案适用于AngularJS中任何和所有点击目标，使用内置的disabled属性表单输入和/或使用Bootstrap的.disabled类的其他元素，并且无需添加到控制器。

HTML

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

的JavaScript

function something( $event )
{
    var is_enabled = !angular.element( $event.currentTarget ).is( '.disabled,:disabled' );
    if( is_enabled )
    {
    }
}

Answer 4

使用ng-disabled。

<md-button ng-disabled="true"> Disabled Button </md-button>

编辑......

Fiddled

防止ng-click =＆＃34;＆＃34;对禁用按钮的影响

4 个答案: