How to show the back button only if it leads to the same single-page-application in AngularJS?

Question

I know how to implement back button in AngularJS: How to implement history.back() in angular.js

And I want to display it only when BACK would lead me to the same application:

<a ng-click="back()" ng-show="isBackAvailable()">BACK</a>

I would like BACK to be hidden if it would lead to some other page.

My current implementation looks like this:

app.run(function($rootScope, $window) {
  var acceptableReferrers = ["http://127.0.0.1:9000/"];

  $rootScope.back = function() {
    $window.history.back();
  }

  $rootScope.isBackAvailable = function() {
    var result = _.contains(acceptableReferrers, document.referrer);
    console.log(result)
    return result;
  }
});

This does not work.

When I paste http://127.0.0.1:9000/ into the browser bar the document.referrer is "" (empty string). However if I do this the following way: <a href="http://127.0.0.1:9000/#/search">now referrer will be correct</a>

Please advise.

You could try to use `$location.absUrl()` and then check if the URL contains any of the acceptable referrers — callmekatootie, May 24 '14 at 19:54
@callmekatootie - ```$location.absUrl()``` tried using it but doesn't work for me :( — Mars Robertson, May 24 '14 at 20:01
Sorry for not being more precise. It always return the current URL I'm in. It doesn't work for me in a sense that it doesn't solve my problem. — Mars Robertson, May 24 '14 at 20:11

score 1 · Answer 1 · answered May 24 '14 at 19:52

1

document.referrer returns the entire url of the previous page, so if you want your function to work you can't check that it matches exactly.

Maybe try something less specific like checking document.referrer for the same hostname:

$rootScope.isBackAvailable = function() {
  var result = _.contains(document.referrer, window.location.hostname);
  console.log(result)
  return result;
};

answered May 24 '14 at 19:52

Joe

2,596
2
14
11

document.referrer is going to be empty any time a user pastes a url into the address bar. That's what's failing, according to the question. I don't think this will help with that. – JeffB May 24 '14 at 19:54
It's a single-page-application and ```document.referrer``` is always ```http://127.0.0.1:9000/"``` regardless my location and how many clicks in the app I've made. – Mars Robertson May 24 '14 at 19:57

score 1 · Answer 2 · answered Jan 05 '16 at 21:13

I've had to solve the same problem in an AngularJS app and I used the $window.history.length to make the determination. When the app initially loads, I save the initial history length in a variable. When the Back button is clicked I compare the current history length with the initial. If my current history is larger, I know that I can go back at least one page to my original starting point. The current index will never be smaller than the initial because its impossible to navigate "back" to a lower index and stay in the app.

This would look something like the following:

app.run(function($rootScope, $window) {
  var historyLength = $window.history.length;

  $rootScope.back = function() {
    $window.history.back();
  }

  $rootScope.isBackAvailable = function() {
    return $window.history.length > historyLength;
  }
});

How to show the back button only if it leads to the same single-page-application in AngularJS?

2 Answers2