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