CODEWITHSUNDEEP
javascriptangularjs
membersound
membersound

Reputation: 86747

How to create clickable icons in angularjs?

I'd like to just create a clickable icon in angularjs. It works so far, but the link element changes the location of the page, which it should not.

<a ng-href="#" ng-click="callbackMethod()" target="_self" class="icon" title="test">
    <span class="glyphicon glyphicon-print"></span>
</a>

Question: how can I prevent the location change? Or is an <a> tag not the correct element here?

Upvotes: 1

Views: 5497

Answers (4)

Harsha Attray
Harsha Attray

Reputation: 86

You dont need the ng-href if u want it to stay on the same page . Add whatever functionality you want within the function and assign it to ng-click

<a ng-click="callbackMethod()" target="_self" class="icon" title="test">
<span class="glyphicon glyphicon-print"></span>

Upvotes: 0

Aer0
Aer0

Reputation: 3907

You can simply pass an empty string to your href attribute. This will prevent your browser from changing its location.

<a ng-href="" ng-click="callbackMethod()" target="_self" class="icon" title="test">
    <span class="glyphicon glyphicon-print"></span>
</a>

Upvotes: 0

Boluc Papuccuoglu
Boluc Papuccuoglu

Reputation: 2346

If you are intending to create just an icon that does something when clicked, don't use the <a> tag, just use a <div> or <img>. An anchor tag is meant semantically aid navigation. See: https://www.w3.org/TR/html401/struct/links.html

Upvotes: 1

Mahmoud
Mahmoud

Reputation: 864

<a href ng-click="callbackMethod()"  class="icon">
    <span class="glyphicon glyphicon-print"></span>
</a>

or:

<span class="glyphicon glyphicon-print" ng-click="callbackMethod()" style="cursor:pointer;"></span>

Upvotes: 1

Related Questions