この要素のng-clickを無効にする

Question

I have ng-click機能を持つ1つのコントローラに3つのボタンがあります。この要素が既にクリックされているときにクリックを無効にする方法はありますか？

<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に依存しないソリューションです。この方法でコントローラのフラグを設定する必要はありません。コントローラのinitにちょうどclicked=falseを追加してください。

Answer 4

これを行うより良い方法は、jqLit​​eまたはjQueryを使用してDOM要素を更新するカスタムディレクティブを作成することです（jQueryライブラリがロードされている場合）。以下のコードスニペットを確認してください。

ユニットテストや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>