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