Question

I have一个控制器中的三个按钮具有ng-click功能。如何在单击此元素时禁用单击？这是一个例子：

<div ng-app="myApp">
  <div ng-controller="GreetingController">
    <button ng-click="!IsClickEnable||DoSomethingElse()">xyz</button>
    <button ng-click="!IsClickEnable||DoSomethingElse()">xyz</button>
    <button ng-click="!IsClickEnable||DoSomethingElse()">xyz</button>
  </div>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.IsClickEnable = true;
  $scope.DoSomethingElse = function() {
    alert('click')
    $scope.IsClickEnable = false;
  };

}]);

Answer 1

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope',
  function($scope) {

    $scope.buttons = [{
      "name": "xyz",
      "disabled": false
    }, {
      "name": "xyz",
      "disabled": false
    }, {
      "name": "xyz",
      "disabled": false
    }];

    $scope.DoSomethingElse = function(b) {
      console.log("Do something");
      b.disabled = true;
    }
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="GreetingController">
    <button ng-repeat="button in buttons" 
            ng-disabled="button.disabled" 
            ng-click="DoSomethingElse(button)">
      {{button.name}}
    </button>
  </div>
</div>

＆＃13;

Answer 2

只需在按钮中添加nd-disable指令：

 <button ng-click="clicked=true;DoSomethingElse()" ng-disabled-"clicked">xyz</button>

独立于javascript的解决方案。这样您无需关心在控制器中设置标志。只需在控制器的init处添加clicked=false。

Answer 3

更好的方法是编写一个自定义指令，使用jqLite或jQuery更新DOM元素（如果加载了jQuery库）。请查看以下代码段。

不应该在Controller中更新DOM，因为它禁止单元测试，并且指令中应该进行DOM操作，以便在此场景中证明是合理的，因为按钮是在视图中创建的，而不是使用Controller中的数据生成的

angular
  .module('demo', [])
  .controller('GreetingController', GreetingController)
  .directive('disableOnClick', disableOnClick);

GreetingController.$inject = ['$scope'];

function GreetingController($scope) {
  $scope.doSomethingElse = function() {
    console.log('do something else');
  }
}

function disableOnClick() {
  var directive = {
    restrict: 'A',
    link: linkFunc
  }

  return directive;

  function linkFunc(scope, element, attrs, ngModelCtrl) {
    element.on('click', function(event) {
      event.target.disabled = true;
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="GreetingController">
    <button disable-on-click ng-click="doSomethingElse()">xyz</button>
    <button disable-on-click ng-click="doSomethingElse()">xyz</button>
    <button disable-on-click ng-click="doSomethingElse()">xyz</button>
  </div>
</div>

Answer 4

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.DoSomethingElse = function(event) {
    event.target.disabled = true;
  };

}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="GreetingController">
    <button ng-click="DoSomethingElse($event)">xyz</button>
    <button ng-click="DoSomethingElse($event)">xyz</button>
    <button ng-click="DoSomethingElse($event)">xyz</button>
  </div>
</div>

＆＃13;

禁用ng-单击此元素

4 个答案: