AngularJS $location replace() replacing last history entry also

angularjs html5-history
Julius picture Julius · Jan 13, 2015 · Viewed 11.5k times · Source

On my AngularJS application I need to save only state changes in the browser history. That's why when I'm changing parameters of $location, I'm using replace() method.

For example, When I'm accessing /page1, it is save in the history. 'centre' parameter is added automatically with replace() so it doesn't add a new history entry:

$location.search('centre', hash).replace();

Every time I move a map, 'centre' changes.

When I go to /page2, the new entry in the history is created. When I move map, 'centre' changes.

The thing is that when I press BACK button, I'm going to /page1 but I need to keep 'centre' the same as it was before, but it changes to what was saved together with history entry of /page1.

How would I fix this issue?

I tried to add:

$window.history.replaceState({}, '', $location.absUrl());

After I do replace(), but didn't work.

Answer

Justin Caldicott picture Justin Caldicott · Nov 4, 2015

I found calling the search & replace inside a 0ms timeout ensures it happens in a separate digest cycle from the main state change and prevents the previous state being replaced.

Something like:

$timeout(function() {
    $location.search('centre', hash).replace();
}, 0);

Related questions

Reload page on browser back/forward button in AngularJS with ui router

I have the following config for ui router state in my angularjs app. $locationProvider.html5Mode(true); $stateProvider .state('index', { url: '/index?zoom&center', views: { 'map': { controller: 'MapCtrl', templateUrl: 'map.html' } }, reloadOnSearch:false }); However, the back forward button …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More