Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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() {
<a href back-button>back</a>
tesnep commented Sep 19, 2013

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 commented Oct 9, 2013

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 ( { $rootScope.navigated = true; }

Then you can evaluate it in your directive:

function goBack() {
if (scope.navigated) {


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 () {
n3ssi3 commented Aug 22, 2014

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:


Substiture that'home') for whatever you like


This works great.




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