禁用ng單擊此元素

Question

我have一個控制器中的三個按鈕，具有ng鍵功能。當這個元素已經被點擊時，我如何禁用點擊？ 這裏是例子：

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

Answer 2

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 3

只需添加ND-禁用指令你的按鈕：

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

一個獨立於JavaScript的解決方案。這種方式您不需要關心在您的控制器中設置標誌。只需在您的控制器初始化時添加clicked=false。

Answer 4

更好的方法是編寫一個自定義指令，使用jqLit​​e或jQuery（在加載jQuery庫的情況下）更新DOM元素。檢查下面的代碼片段。

DOM不應該在控制器中更新，因爲它禁止在指令中發生單元測試和DOM操作，在這種情況下證明按鈕是在視圖本身中創建的，而不是使用控制器。

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>