I want two links to be deactivated when I press a button. I wanted to use the ng-disabled directive but it does not work for links, only on buttons.
something like this.
I want two links to be deactivated when I press a button. I wanted to use the ng-disabled directive but it does not work for links, only on buttons.
something like this.
The disable for the link does not apply because it does not have this functionality, for the links you use styles.
angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){
$scope.state = '';
$scope.Disable = function(){
$scope.state = 'disable';
};
$scope.IsDisable = function(){
return $scope.state == 'disable';
};
}]).disabled {
cursor: not-allowed;
pointer-events: none;
color: grey;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="ngApp">
<div ng-controller="ngCtrl">
<div>
<button ng-click="Disable()">Disable</button><br/>
<a href="http://www.google.com" ng-class="{disabled: IsDisable()}">link google</a>
</body>
</html> The problem here is that ng-disabled exists to modify the disabled attribute. This attribute is valid for the elements <select> , <option> , <input> , <button> , <optgroup> , <textarea> , <fieldset> and <menuitem> . There are others that have that attribute too but they are obsolete or not recommended, so I do not mention them.
This directive is necessary since disabled is a Boolean HTML attribute so if you try to interpolate it the HTML will interpret it as its value is true. Ex:
<button disabled="{{habilitar}}">
In the previous case the button will always be disabled regardless of the value of $scope.habilitar .
The <a> links do not have this attribute so you must supply that functionality with classes
.disabled {
/* para evitar que el click y otros eventos funcione en el elemento*/
pointer-events: none;
/* para simular el estado desabilitado */
background-color: lightgray;
}
Then you have to apply the class conditionally what you can achieve with ng-class
angular.module('app', [])
.controller('MyCtrl', function($scope) {
$scope.isDisabled = true;
$scope.doClick = function() {
alert('hiciste click');
}
});.disabled {
/* para evitar que el click y otros eventos funcione en el elemento*/
pointer-events: none;
/* para simular el estado desabilitado */
background-color: lightgray;
/* Para que parezca un boton*/
padding: 1px 6px;
color: gray;
border: lightgray solid 1px;
}
/* Para que parezca un boton*/
a {
cursor: pointer;
padding: 1px 6px;
border: lightgray solid 1px;
}
button: {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div>
<label>Desabilitado</label>
<input type="checkbox" ng-model="isDisabled">
</div>
<button ng-disabled="isDisabled" ng-click="doClick()">Boton</button>
<a ng-class="{'disabled': isDisabled}" ng-click="doClick()">Enlace</a>
<small>Haz click en los botones</small>
</div>