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>

The problem here is that if the previous state is on another website, the user should not be redirected there. A solution is to track whether or not the user has a previous state within your Angular-powered app to decide whether or not to call history.back().

The way I implemented it was by tracking if the state changed within rootScope:

$rootScope.navigated = false;
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
    if (from.name) { $rootScope.navigated = true; }
}); 

Then you can evaluate it in your directive:

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

Is there a way to back with the old state?

I would suggest changing the call to history.back(); to $window.history.back(); thus making it easier for unit testing and removing the need for the call to scope.$apply(). Something like my fork.

@frenchtoast747 - Your suggestion is a good one, thanks. However, be careful – your fork has a few mistakes. Your directive isn't returning anything, and it's missing a ] towards the end.

It should read more along the lines of the following:

app.directive('backButton', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.bind('click', function () {
                    $window.history.back();
                });
            }
        };
    }]);

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);
        } 
      }
    }
  }
}]);