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

＆＃13;

a.disable{
    pointer-events: none; 
}

＆＃13;

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

＆＃13;

Answer 2

将标记<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。

如何禁用给定条件的href？

4 个答案: