href overrides ng-click in Angular js

Question

When both  href and ng-click attributes are defined    lt a href     ng-click  logout    gt Sign out lt  a gt    the href attribute takes precedence over ng-click   I am looking for a way to raise priority of ng-click   href is required for Twitter Bootstrap  I can t remove it

User · Answer

This worked for me in IE 9 and AngularJS v1 0 7    lt a href  javascript void 0   ng-click  logout    gt Logout lt  a gt    Thanks to duckeggs  comment for the working solution

User · Answer

Just one more hint  If you need real URL  to support browser accessibility  you can do the following   template    lt a ng-href    link    ng-click   event preventDefault    linkClicked link   gt   link   lt  a gt    directive    scope linkClicked   function link          your code here      location path link        In this way your code in linkClicked   will have chance to execute before navigating to the link

User · Answer

You can also try this    lt div ng-init  myVar    www thesoftdesign   gt           lt h1 gt Tutorials lt  h1 gt           lt p gt Go to  lt a ng-href    myVar    gt   myVar   lt  a gt  to learn  lt  p gt   lt  div gt

User · Answer

In Angular   lt a gt s are directives  As such  if you have an empty href or no href  Angular will call event preventDefault   From the source       element on  click   function event            if we have no href url  then don t navigate anywhere        if   element attr href             event preventDefault                      Here s a plnkr demonstrating the missing href scenario

User · Answer

This works for me    lt a href  click   logout    gt      lt i class  icon-power-off  gt  lt  i gt     Logout  lt  a gt

User · Answer

Did you try redirecting inside the logout function itself  For example  say your logout function is as follows   scope logout   function        scope userSession   undefined    window location    http   www yoursite com        Then you can just have    lt a ng-click  logout    gt Sign out lt  a gt

User · Answer

I ll add for you an example that work for me and you can change it as you want   I add the bellow code inside my controller         scope showNumberFct   function            alert  Work                 and for my view page I add the bellow code    lt a  href    ng-model  showNumber  ng-click  showNumberFct    ng-init  showNumber   false   gt Click Me    lt  a gt

User · Answer

Please check this   lt a href     ng-click  logout event   gt Logout lt  a gt     scope logout   function event       event preventDefault    alert  working

User · Answer

This example from the angular documentation site just does href without even assigning it to an empty string     lt a href ng-click  colors splice  index  1   gt X lt  a gt     http   docs angularjs org api ng directive select

User · Answer

for dynamic elements - if you want it in ng-repeat do below code  angular forEach  scope data  function value  key           add new value to object     value new url     your url          lt div ng-repeat  row in data  gt  lt a ng-href     row url content     gt  lt  a gt  lt  div gt

User · Answer

You should probably just use a button tag if you don t need a uri

User · Answer

Here is another solution     lt a href    ng-click  logout    gt Sign out lt  a gt    i e  Just remove the   from the href attribute

User · Answer

You can simply prevent the default behavior of the click event directly in your template    lt a href     ng-click   event preventDefault   logout      gt    Per the angular documentation       Directives like ngClick and ngFocus expose a  event object within the scope of that expression

User · Answer

I don t think you need to remove     from href  Following works with Angularjs 1 2 10   lt a href      ng-click  logout    gt Logout lt  a gt

User · Answer

Just write ng-click before href   It worked for me    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D     lt head gt  x000D       lt script data-require  angular js 1 5 0  data-semver  1 5 0  src  https   ajax googleapis com ajax libs angularjs 1 5 0 angular js  gt  lt  script gt  x000D       lt script gt  x000D      angular module  module      x000D   controller  controller  function  scope   x000D     x000D     scope func  function    x000D      console log  d    x000D      x000D     x000D     lt  script gt  x000D     lt  head gt  x000D   x000D     lt body ng-app  module  ng-controller  controller  gt  x000D       lt h1 gt Hello    lt  h1 gt  x000D       lt a ng-click  func    href  someplace html  gt Take me there lt  a gt  x000D     lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

There are so many answers for this question here but it seems there is a bit of confusion about what s actually going on here   Firstly  your premise       href overrides ng-click in Angular js    is wrong  What is actually happening is that after your click  the click event is first handled by angular defined by ng-click directive in angular 1 x and click in angular 2 x   and then it continues to propagate which eventually triggers the browser to navigate to the url defined with href attribute   See this for more about event propagation in javascript   If you want to avoid this  then you should cancel the event propagation using the The Event interface s preventDefault   method    lt a href     ng-click   event preventDefault   logout      gt     This is pure javascript functionality and nothing to do with angular   Now  this will already solve your problem but this is not the optimal solution  Angular  rightfully  promotes the MVC pattern  With this solution  your html template is mixed with the javascript logic  You should try to avoid this as much as possible and put your logic into your angular controller  So a better way would be   lt a href     ng-click  logout  event     gt    And in your logout   method   logout  event        event preventDefault               Now the click event will not reach the browser  so it will not try to load the link pointed by href   However note that if the user right clicks on the link and directly opens the link  then there won t be a click event at all  Instead it will directly load the url pointed by the href attribute    Regarding the comments about visited link color in the browsers  Again this has nothing to do with angular  if your href       points to a visited url by your browser by default the link color will be different  This is controlled by CSS  visited Selector  you can modify your css to override this behaviour   a      color pink      PS1    Some answers suggest to use    lt a href      gt    href is an angular directive  When your template is processed by angular this will be converted to    lt a href         gt    Those two ways are essentially the same

[html] href overrides ng-click in Angular.js

Examples related to html

Examples related to angularjs

Examples related to anchor

Examples related to markup