AngularJS – ng-disabled ne fonctionne pas pour Anchor tag

J'utilise ng-disabled, j'aime ça. Cela fonctionne bien pour l'entrée et les boutons. L'étiquette d'ancrage ne fonctionne pas. Comment puis-je réparer?

HTML code

 <a ng-disabled="addInviteesDisabled()">Add</a> 

JS code

  $scope.addInviteesDisabled = function() { return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL; }; 

Il n'y a pas d'attribut invalide pour les hyperliens. Tu peux le faire:

 .disabled { cursor: not-allowed; } <a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a> $scope.disabled = function() { if($scope.addInviteesDisabled) { return false;} } 

Vous pouvez créer une classe css de linkDisabled et l'appliquer à votre ancre:

 <style> .linkDisabled { cursor: not-allowed; pointer-events: none; color: grey; } </style> 

Vous ne pouvez pas désactiver la balise d'ancrage avec ng-disabled .

Le contrôle de formulaire a désactivé la propriété, mais la balise d'ancrage n'a pas de propriété de désactivation.

Vérifiez pourquoi le ng-disabled d'angular fonctionne-t-il avec la classe btn bootstrap?

Vous pouvez le faire via CSS, aucune direction de fantaisie n'est requise. Utilisez simplement ng-class pour appliquer une sorte de classe comme ceci:

Ng-class:

 ng-class="{disabledLink: disabledFunction()}" 

Css:

 .disabledLink { color: #ccc; pointer-events:none; } 

Plein crédit à

https://css-tricks.com/pointer-events-current-nav/

Cette question a été répondu avant: Activer / Désactiver les balises d'ancrage à l'aide de AngularJS

Utilisez une directive personnalisée ou utilisez un bouton à la place.

Oui copain, nous pouvons désactiver la balise d'ancrage, permet de voir ce qu'il faut faire. Anchor est cliquable, d'abord nous avons nedd pour désactiver le clic, nous pouvons le faire par pointer-events: none; Et ensuite pour montrer l'utilisation qu'il est désactivé, nous pouvons modifier la couleur sur laquelle nous devons le désactiver comme couleur: # 95979A ;. Pourtant, nous devons comprendre ce qui se passe ici, en ajoutant ce qui précède ne désactivera pas l'événement de clic de l'étiquette d'ancrage. Pour arrêter que nous devons ajouter ng-disabled, nous ajoutons l'événement d'attribut comme disabeld = disabled, Nous devons attraper cela en utilisant [disabled].

Le code final: a [disabled] {pointer-events: none; couleur: # 95979A;} désactive l'événement de clic de la balise d'ancrage.

J'espère que ça m'a aidé. Merci

Lorsque ng-Disabled évalué sur true , définit l'attribut disabled sur l'élément qui est généralement une entrée, ou un autre contrôle de forme. <a> balises <a> ne possèdent pas d'attributs disabled afin de ne jamais être définies. Essayez de définir le ng-disabled sur votre lien vers true et vous verrez par vous-même.

Peut-être que cela aidera: ng-disabled et Anchor Tags Oh Noes!

La meilleure façon est d'ajouter la condition désactivée dans la fonction de l'ancre. Ainsi, les fonctions ne fonctionnent que lorsque la condition désactivée est cochée et passée.

 $scope.next_kh_resource = function(){ if ($scope.selected_kh_index < ($scope.selected_step.step_kh_resources.length -1)){ var next = $scope.selected_kh_index + 1; $scope.selected_kh_index = $scope.selected_kh_index +1; $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[next]; } } $scope.prev_kh_resource = function(){ if ($scope.selected_kh_index > 0){ var prev = $scope.selected_kh_index -1; $scope.selected_kh_index = prev; $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[prev]; } } 

Dans l'exemple ci-dessus, j'ai désactivé les ancres de pagination suivantes et précédentes en insérant la condition désactivée dans les fonctions. Les utilisateurs sont intelligents. Ils vont bientôt apprendre que c'est la page de fin et ils peuvent cliquer ensuite mais rien ne se passera

Utilisez a-disabled au lieu de ng-disabled

  <a a-disabled="addInviteesDisabled()">Add</a>