How to implement history back in angular js

Question

I have directive which is site header with back button and I want on click to go back to the previous page  How do I do it in the angular way   I have tried    lt header class  title  gt   lt a class  back  ng-class  icons  gt  lt img src     media icons right circular png  ng-click  history back      gt  lt  a gt   lt h1 gt   title   lt  h1 gt   lt a href   home  class  home  ng-class  icons  gt  lt img src     media icons 53-house png    gt  lt  a gt      lt  header gt    and this is the directive js   myApp directive  siteHeader   function          return           restrict   E           templateUrl   partials siteHeader html           scope                title    title               icons    icons                         but nothing happens  I looked in the angular js API about  location but didn t find anything about back button or history back

User · Answer

For me  my problem was I needed to navigate back and then transition to another state  So using  window history back   didn t work because for some reason the transition happened before history back   occured so I had to wrap my transition in a timeout function like so    window history back    setTimeout function        state transitionTo  tab jobs       100     This fixed my issue

User · Answer

In AngularJS2 I found a new way  maybe is just the same thing but in this new version     import  Router  RouteConfig  ROUTER DIRECTIVES  Location  from  angular2 router            constructor private  router  Router  private  location  Location      onSubmit                   self  location back        After my function  I can see that my application is going to the previous page usgin location from angular2 router   https   angular io docs ts latest api common index Location-class html

User · Answer

Ideally use a simple directive to keep  controllers free from redundant  window  app directive  back      window   function  window            return               restrict   A               link  function  scope  elem  attrs                    elem bind  click   function                           window history back                                                            Use like this    lt button back gt Back lt  button gt

User · Answer

There was a syntax error  Try this and it should work   directives directive  backButton   function        return           restrict   A           link  function scope  element  attrs                element bind  click   function                      history back                    scope  apply

User · Answer

Another nice and reusable solution is to create a directive like this   app directive   backButton   function         return           restrict   A           link  function  scope  element  attrs                 element on   click   function                      history back                    scope  apply                                             then just use it like this    lt a href back-button gt back lt  a gt

User · Answer

Angular 4      typescript    import   Location   from   angular common            Component               export class MyComponent      constructor private location  Location          goBack         this location back       go back to previous location

User · Answer

Angular routes watch the browser s location  so simply using window history back   on clicking something would work   HTML    lt div class  nav-header  ng-click  doTheBack    gt Reverse  lt  div gt    JS    scope doTheBack   function       window history back         I usually create a global function called   back  on my app controller  which I usually put on the body tag   angular module  myApp   controller  AppCtrl      scope   function  scope       scope  back   function          window history back                Then anywhere in my app I can just do  lt a ng-click   back    gt Back lt  a gt    If you want it to be more testable  inject the  window service into your controller and use  window history back

User · Answer

In case it is useful    I was hitting the  10  digest   iterations reached  Aborting   error when using  window history back    with IE9  works fine in other browsers of course    I got it to work by using   setTimeout function        window history back      100

User · Answer

Or you can simply use javascript code    onClick  javascript history go -1      Like    lt a class  back  ng-class  icons  gt      lt img src     media icons right circular png  onClick  javascript history go -1      gt   lt  a gt

User · Answer

You need to use a link function in your directive   link  function scope  element  attrs         element on  click   function               window history back                  See jsFiddle

[javascript] How to implement history.back() in angular.js

Examples related to javascript

Examples related to angularjs