JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="linkSample" ng-controller="Controller">
    <button ng-click="toggleLink()">Toggle link state</button>
    <p>linkEnabled: <b>{{linkEnabled}}</b></p>
    <a my-link="linkEnabled"
            data-ng-class="{'disabled': !linkEnabled} "
            href="/home/overview"
            title="Home">
        <i class="fa fa-home fa-fw">Link</i>
    </a>
</div>

CSS

.disabled {
  color: gray;
  cursor: default;
}

JavaScript

angular.module('linkSample', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.linkEnabled = true;
    $scope.toggleLink = function() {
      $scope.linkEnabled = !$scope.linkEnabled;
    }
  }])
  .directive('myLink', function() {
    return {
      scope: {
        enabled: '=myLink'
      },
      link: function(scope, element, attrs) {
        element.bind('click', function(event) {
          if(!scope.enabled) {
            event.preventDefault();
          }
        });
        
      }
    };
  });