如何在給定條件的情況下禁用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。