1

Quiero que se desactiven dos enlaces al presionar un botón. Quise usar la directiva ng-disabled pero no funciona para enlaces, sólo en botones. algo como esto.

Este ejemplo lo hace pero lo necesito con enlaces

1
  • 1
    Hola Gustavo. Bienvenido a SO en español. Podrías editar la pregunta y agregarle lo que has intentado hasta ahora. Puede que yo sepa cual es tu problema pero con detalles tan escasos es difícil saberlo con seguridad.
    – devconcept
    Commented el 22 jun. 2016 a las 15:49

2 respuestas 2

0

No aplica el disable para el link porque no tiene esta funcionalidad, para los link usas estilos.

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>

AngularJS - ng-disabled not working for Anchor tag

3
  • habra otra forma o talvez usando otra directiva
    – Gustavo
    Commented el 22 jun. 2016 a las 16:26
  • otra como cual ? cada elemento del html se trabaja con sus atributos si el disable no es valido para el link entonces se aplican los que este contempla, en este caso serian estilos Commented el 22 jun. 2016 a las 16:58
  • y como seria para volverlo a activar
    – Gustavo
    Commented el 23 jun. 2016 a las 22:49
0

El problema aquí es que ng-disabled existe para modificar el atributo disabled. Dicho atributo es válido para los elementos <select>, <option>, <input>, <button>, <optgroup>, <textarea>, <fieldset> y <menuitem>. Hay otros que tienen ese atributo también pero son obsoletos o no recomendados por eso no los menciono.

Esta directiva es necesaria ya que disabled es un attributo HTML booleano por lo que si intentas interpolarlo el HTML lo interpretará como que su valor es true. Ej:

<button disabled="{{habilitar}}">

En el caso anterior el botón siempre estará desabilitado sin importar el valor de $scope.habilitar.

Los enlaces <a> no tienen dicho atributo por lo que debes suplir esa funcionalidad con clases

.disabled {
    /* para evitar que el click y otros eventos funcione en el elemento*/
    pointer-events: none;
    /* para  simular el estado desabilitado */
    background-color: lightgray;
}

Luego te queda aplicar la clase condicionalmente lo que lo puedes lograr con 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.