Anchor tag disabled for click

Question

I have an anchor tag and want to make it disable for click in particular conditions. I wrote a directive, but it doesn't work. Can somebody tell me where I am wrong. When I used button, everything works, but I need anchor tag.

In controller, I vave already set linkEnabled to false

<a my-link="linkEnabled" title="Delete" ng-if="row.entity.status === 0" ng-click ng-really-title="Delete Item"
       ng-really-no="Cancel" ng-really-yes="Delete"
       ng-really-message="Are you sure you want to permanently delete {{row.entity.filename}}?"
       ng-really-click="grid.appScope.deleteItem(row.entity)" class="text-danger">
        <i class="fa fa-trash-alt fa-lg"></i>
    </a>

Here is my directive:

'use strict';

angular.module('modio.credentialing')
    .directive('myLink', function () {
        return {
            scope: {
                enabled: '=myLink'
            },
            link: function (scope, element, attrs) {
                element.on('click', function (event) {
                    if (!scope.enabled) {
                        event.preventDefault();
                    }
                });
            }
        }
    });

Try after `event.preventDefault();` `return false;` or do something else and if `!scope.enabled` replace with — Zydnar, Jan 13 '19 at 12:33
you can check the second answer answered by Lakhan here, a css-jquery tricky solution: [solution](https://stackoverflow.com/questions/970388/jquery-disable-a-link) When condition applies, append the class mentioned there. It should work — user404, Jan 13 '19 at 12:37

score 0 · Answer 1 · answered Jan 13 '19 at 18:42

0

You don't need a custom directive for that. You can disable links using css.

To apply conditional CSS class use ng-class.

answered Jan 13 '19 at 18:42

Kate Chumbarova

36
1

Anchor tag disabled for click

1 Answers1