禁用ng單擊此元素

Question

我在一個具有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

 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; } } ]); 

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

Answer 2

只需將nd-disable指令添加到您的按鈕即可：

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

一個獨立於javascript的解決方案。這樣您就不必在控制器中設置標志了，只需在控制器的初始位置添加clicked=false 。

Answer 3

更好的方法是編寫一個自定義指令，該指令使用jqLit​​e或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

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

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