How to make preventDefault links at the angle?

Question

I’m using a function called with ng-click, via a link (Anchor). However, because of the hash #, the page is "skipping" every time I click on this link.

This is my code:

<a ng-click="openImageModal(request)" href="#">
   Abrir modal
</a>

I’d like to make a preventDefault on that link, so that it could perform the function of angularjs, but without "skipping" the page, because of the hash #.

How to do this in the AngularJS?

I would like a solution without using jQuery, because I want to get rid of his dependency.

Answer 1

• Remove href='#'

• add the following CSS class:

  a[ng-click]{
      cursor: pointer;
  }
  

Thus you will eliminate the default behavior while maintaining visual link feedback.

Answer 2

Change the href="#" for href="javascript:void(0)".

Answer 3

If you define the href empty will also work:

<a href ng-click="addNinja('OnoSedai')">Adicionar Novo Ninja</a>

The advantage of doing so is that you won’t need to define a CSS because of the absence cursor:pointer, since links without href in some browsers don’t come with cursor:pointer by default.

See it working on Ideone:

http://jsfiddle.net/Lvc0u55v/7523/