如何在给定条件的情况下禁用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新手，因此不确定此函数是否在正确的位置。 这是另一个控制器文件，应该在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> 

Answer 2

将标签<a>标签重写为<a disabled> <a> <a disabled>

参见http://www.w3schools.com/tags/ref_attributes.asp

它也应该可以通过javascript作为对象进行编辑。 寻找类似的东西：

object = document.getElementById("MyElem");
object.disabled = true;

要么

object.active = false;

Answer 3

onclick="onClickFunc(event, {{ element.id or class }})"

function onClickFunc(event, somedata) {
    event.preventDefault(); // Stops the default behavior
    // ...
}

// event.preventDefault（）; 停止链接的默认行为。

Answer 4

使用按钮代替链接。 给它CSS class =“ btn btn-link”（Bootstrap）。 在ng-click上调用函数AgreementPermission。