Is there a simple way to use button to navigate page as a link does in angularjs

Question

In angularjs  I want to use button like this  but I still need the button looking    lt button href    new-page html  gt New Page lt button gt    As a  link  does   lt a href    new-page html  gt New Page lt  a gt    Is there a simpler way than this    lt button ng-click  newPage    gt New Page lt button gt   scope newPage   function         location href      new-page html        Note  Acutally  when I used to location href for navigation  the whole is refreshed and the navigation is not under the control of angularjs  If I don t use link  how to navigate page in javascript code   Do I need to create a custom directive to impl it

User · Answer

If you re OK with littering your markup a bit  you could do it the easy way and just wrap your  lt button gt  with an anchor   lt a gt   link    lt a href    new-page html  gt  lt button gt New Page lt button gt  lt  a gt    Also  there is nothing stopping you from styling an anchor link to look like a  lt button gt     as pointed out in the comments by  tronman  this is not technically valid html5  but it should not cause any problems in practice

User · Answer

For me  best solution is to use Angular router native directives with ui-sref like    lt button ui-sref  state name  gt Go   lt  button gt    To understand that directive and get more options visit ui-router docs at   https   ui-router github io docs 0 3 1   api ui router state directive ui-sref

User · Answer

With bootstrap you can use   lt a href    new-page html  class  btn btn-primary  gt      Click  lt  a gt

User · Answer

lt a type  button  href    new-page html  class  btn btn-lg btn-success   gt New Page lt  a gt    Simple

User · Answer

lt button type  button  href  location href    nameOfState   gt Title on button lt  button gt    Even more simple     note the single quotes around the address

User · Answer

You can also register  location on the scope in the controller  to make it accessible from html   angular module      controller        function  location       scope  location    location              and then go straight for the honey in your html    lt button ng-click   location path    new-page html    gt New Page lt button gt

User · Answer

Your ngClick is correct  you just need the right service   location is what you re looking for  Check out the docs for the full details  but the solution to your specific question is this    location path    new-page html       The  location service will add the hash     if it s appropriate based on your current settings and ensure no page reload occurs   You could also do something more flexible with a directive if you so chose      directive   goClick   function    location       return function   scope  element  attrs         var path       attrs  observe   goClick   function  val          path   val               element bind   click   function            scope  apply  function               location path  path                                 And then you could use it on anything    lt button go-click   go to this  gt Click  lt  button gt    There are many ways to improve this directive  it s merely to show what could be done  Here s a Plunker demonstrating it in action  http   plnkr co edit 870E3psx7NhsvJ4mNcd2 p preview

[javascript] Is there a simple way to use button to navigate page as a link does in angularjs

Examples related to javascript

Examples related to angularjs