Enable/Disable Anchor Tags using AngularJS

Question

How do I enable/disable anchor tags using the directive approach?

Example:

1. while clicking on edit link, create & delete needs to be disabled or grayed out
2. while clicking on create link, edit & delete needs to be disabled or grayed out

JAVASCRIPT:

    angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){      $scope.create = function(){       console.log("inside create");     };      $scope.edit = function(){       console.log("inside edit");     };      $scope.delete = function(){     console.log("inside delete");     };      }]).directive('a', function() {        return {             restrict: 'E',             link: function(scope, elem, attrs) {                 if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){                     elem.on('click', function(e){                         e.preventDefault();                         if(attrs.ngClick){                             scope.$eval(attrs.ngClick);                         }                     });                 }             }        };     });  

LINK to CODE

Answer 1

Update: Disabling the href works better in the link function return. Code below has been updated.

aDisabled naturally executes before ngClick because directives are sorted in alphabetical order. When aDisabled is renamed to tagDisabled, the directive does not work.

---

To "disable" the "a" tag, I'd want the following things:

1. href links not to be followed when clicked
2. ngClick events not to fire when clicked
3. styles changed by adding a disabled class

This directive does this by mimicking the ngDisabled directive. Based on the value of a-disabled directive, all of the above features are toggled.

myApp.directive('aDisabled', function() {     return {         compile: function(tElement, tAttrs, transclude) {             //Disable ngClick             tAttrs["ngClick"] = "!("+tAttrs["aDisabled"]+") && ("+tAttrs["ngClick"]+")";              //return a link function             return function (scope, iElement, iAttrs) {                  //Toggle "disabled" to class when aDisabled becomes true                 scope.$watch(iAttrs["aDisabled"], function(newValue) {                     if (newValue !== undefined) {                         iElement.toggleClass("disabled", newValue);                     }                 });                  //Disable href on click                 iElement.on("click", function(e) {                     if (scope.$eval(iAttrs["aDisabled"])) {                         e.preventDefault();                     }                 });             };         }     }; }); 

Here is a css style that might indicate a disabled tag:

a.disabled {     color: #AAAAAA;     cursor: default;     pointer-events: none;     text-decoration: none; } 

And here is the code in action, with your example