Skip to content

@jakemmarsh /directives.js
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.