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>

I am not sure I follow this. In a single page app, pressing the back button should take you to other "theoretical-pages" like Home, About Us, etc within the single-page app. What this does is take us back to previous window.href.

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