Create a gist now

Instantly share code, notes, and snippets.

AngularJS directive to create a functional "back" button
app.directive('backButton', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', goBack);
function goBack() {
history.back();
scope.$apply();
}
}
}
});
<a href back-button>back</a>
@tesnep

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.

@gwendall

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

@robsonximenes

Is there a way to back with the old state?

@frenchtoast747

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.

@edbentinck

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

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

@kyleledbetter

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

@sterichards

This works great.

Thanks!

@maxialoise

Thanks!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment