JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="module">
    <a-directive id="link-1" class="clickable">link 1</a-directive> (has no href)<br />
    <a-directive id="link-2" href="" class="clickable">link 2</a-directive> (has href="")<br />
    <a-directive id="link-3" class="clickable" href>link 3</a-directive> (has empty href)<br />
    <a-directive id="link-4" href="#" class="clickable">link 4</a-directive> (has href="#")<br /><br />
    <span>
        <strong>Log:</strong>
    </span>
    <div id="logs"></div>
</div>

CSS

.clickable { 
    color: blue;
    text-decoration: none; 
    cursor: pointer;
}
.clickable:hover {
    text-decoration: underline; 
}

JavaScript

angular.module('module', []).directive('aDirective', function() {
    return {
        restrict: 'E',
        compile: function(element, attr) {  
        logs = document.getElementById('logs');
            if (!attr.href && !attr.name) {
                return function(scope, element) {
                    element.on('click', function(event) {
                        if (!element.attr('href')) {
                            logIt("Element with ID: '" + element.attr("id") + "' is preventing default")
                            event.preventDefault();
                        } else {
                            logIt("Element with ID: '" + element.attr("id") + "' is NOT preventing default")
                        }                        
                    });
                };
            } else {
                return function(scope, element) {
                    element.on('click', function(event) {
                        logIt("Element with ID: '" + element.attr("id") + "' is NOT preventing default")                       
                    });
                };
            }
        }
    };
});

function logIt(message){
    var e = document.createElement('div');
    e.innerHTML = message;
    logs.insertBefore(e, logs.firstChild);
}