How to disable an href given a condition?

Question

I have a link that I need to disable depending on the permission a user has. Below is the htmn for the link:

<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>

(The ng-click doesn't work)

Here is the js directive for that file:

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";
                            }
                        }
                    }
                }
            };
        }
    ])
});

The function that is within the 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();
            }
        };

As I am new to javascript, I am not sure if this function is in the correct place. It is an another controller file, should it be in the js directive for the html? So basically, when a user without permission clicks the link, the showError box will be triggered, if they do have permission, then the page will redirect to the link. Any suggestions would be greatly appreciated! let me know if I should provide further information!:-)

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

rewrite the tags <a> tag to <a disabled>

see http://www.w3schools.com/tags/ref_attributes.asp

it should be editable through javascript as an object as well. look for something like:

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

or

object.active = false;

Answer 3

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

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

// event.preventDefault(); stops the default behavior of the link.

Answer 4

Use button instead of link. Give it CSS class="btn btn-link"(Bootstrap). Call the function agreementPermission on ng-click.