How to prevent page refresh on anchor href

Question

I am using the code below.

<a ng-href="" ng-click="do()" eat-click>Click Me</a>
module.directive('eatClick', function () {
    return function (scope, element, attrs) {
        $(element).click(function (event) {
            event.preventDefault();
        });
    }
})

Is there a better way to do this? Please share. Thanks in advance.

Answer 1

event.preventDefault() , works properly in this case. You can also use ng-href tag of angular for alternative solution.

$(element).click(function(event) {
    event.preventDefault();
});

You can also try below:-

$('a[href=""]').click(function(event) {
    event.preventDefault();
});

Answer 2

There is no need of defining directive, only ng-href="" is enough. Just replace all href with ng-href.