javascript - 如何在给定条件下禁用 href？

Question

我有一个链接，需要根据用户拥有的权限来禁用。以下是链接的 htmn:

<div ng-repeat="userAgreement in journalist.userAgreements">
    <div class="row" ng-repeat="attachment in userAgreement.attachments">
        <div class="col-sm-12" style="color: #2a98d4">
            <ul style="margin-bottom: 0px; padding-left: 1.5em;">
                <li class="fa fa-check-circle" style="font-size: 1.1em; margin: 3px;">
                    <a target="_blank" href="{{attachment.url}}" ng-click="agreementPermission($event)" class="cursor-pointer" style="font-family: FranklinITCProLight">{{getAttachmentName(userAgreement.agreement, attachment)}}</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div ng-show="!hasAttachments">
    <div class="col-sm-12" style="color: #2a98d4">
        <ln code="journalist.completed.documents.empty" args=""></ln>
    </div>
</div>
</div>

(ng-click 不起作用)

这是该文件的 js 指令:

define(["app"], function (app) {
    return app.directive('completedAgreements',[
        function () {
            return {
                restrict: 'E',
                templateUrl: '/directives/completed-agreements.html',
                link: function ($scope, elm, attrs) {
                    $scope.hasAttachments = false;
                    $scope.getAttachmentName = function(agreement, attachment) {
                        $scope.hasAttachments = true;
                        if(attachment.templateId) {
                            return attachment.name;
                        } else {
                            if(agreement.type == 'DIRECT_DEPOSIT') {
                                return "Payment Documents"
                            } else {
                                var specialization = agreement.specialisation.toLowerCase();
                                return specialization.charAt(0).toUpperCase() + specialization.slice(1) + " Agreement";
                            }
                        }
                    }
                }
            };
        }
    ])
});

ng-click 中的函数:

$scope.agreementPermission = function(e) {
            if (!SecurityService.canViewAgreements()) {
                showError($uibModal, "You do not have permission to access this attachment. Please contact an administrator.", null, null, null, null, "Access Denied");
                e.preventDefault();
            }
        };

由于我是 JavaScript 新手，我不确定这个函数是否位于正确的位置。这是另一个 Controller 文件，它应该在 html 的 js 指令中吗？所以基本上，当没有权限的用户单击该链接时，将触发 showError 框，如果他们有权限，则页面将重定向到该链接。任何建议将不胜感激!如果我应该提供更多信息，请告诉我!:-)

Answer 1

a.disable{
    pointer-events: none; 
}

<!--You can add css class to disable the link (anchor), example: -->
<a ng-class="{'disable': isAvailable(product.id)}">see product</a>