AngularJS directive to create a functional "back" button

directives.js

app.directive('backButton', function(){
    return {
      restrict: 'A',

      link: function(scope, element, attrs) {
        element.bind('click', goBack);

        function goBack() {
          history.back();
          scope.$apply();
        }
      }
    }
});

index.html

<a href back-button>back</a>

Hi, Is there also a nice way to hide the backButton when you actually can not go back any further?

Thx @edbentinck your code works great for me.

@n3ssi3 if you're using ui-router you can do something like this to hide the button on the homepage:

ng-class="{'ng-hide':$state.is('home')}"

Substiture that state.is('home') for whatever you like

This works great.

Thanks!

Thanks!!

But Back button still displayed in Main page. How to hide it

Why not use something like $localStorage (ngStorage) to save the previous state. That way it is preserved on reload.

In the run block...
Initialize storage

$localStorage.$default({
  prevState:{}
});

Save previous state on state change:

$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
    if (from.name) { 
      $localStorage.prevState = {'state':from,'params':fromParams}; 
    }
}); 

In the directive
Check storage for previous navigation and simply use state.go with the values from storage. I would probably also have a default page to go to, just in case...

angular.module("directive.backbutton",[])

.directive("backButton", ['$state','$localStorage', function ($state,$localStorage) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind('click', goBack);
      function goBack() {
        if ($localStorage.prevState.state !== undefined) {
          $state.go($localStorage.prevState.state,$localStorage.prevState.params);
        } 
      }
    }
  }
}]);