JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="appCtrl">
    <a class="disableable" target="_blank" ng-click="tellAboutIt()" disable="disableIt">ngClick disableable link</a>
    <br/><br/>
    <a class="disableable" target="_blank" href="http://google.com" disable="disableIt">href disableable link</a>
    <br/><br/>
    <input type="checkbox" ng-model="disableIt" /> Disable links
</div>

CSS

a {
    padding: 5px;
}

.disabled {
    color: #aaa;
    text-decoration: none;
}

JavaScript

var app = angular.module('app', []);

app.controller('appCtrl', function($scope, $window){
    $scope.disableIt = false;
    $scope.tellAboutIt = function(){
        $window.alert('ngClick fired. This alert should not show when disabled.');
    };
});
               
app.directive('disableable', function($parse){
    return {
        restrict: 'C',
        require: '?ngClick',
        link: function (scope, elem, attrs, ngClick) {
            if (attrs.disable){
                var disable = $parse(attrs.disable);

                elem.bind('click', function (e) {
                    if (disable(scope)){
                        console.log("preventDefault");
                        e.preventDefault();
                        return false;
                    }

                    return true;
                });

                scope.$watch(disable, function (val) {
                    if (val){
                        elem.addClass('disabled');
                        elem.css('cursor', 'default');
                    }
                    else {
                        elem.removeClass('disabled');
                        elem.css('cursor', 'pointer');
                    }
                });
            }
        }
    };
});