Resyncing $urlRouterProvider.deferIntercept(); for angular 1 ui router - angularjs

Question

In Angular 1.5 and angular ui router, I want to change the back button behaviour of my states to recognise the names of the states and not the params as I have a url /restaurant/1?param1=value&param2=value which dynamically changes without refreshing the page. I have the binding and url not changing when a property changes, but when I hit the back button it goes to the previous params state, not the saved state in $rootScope by name. I've debugged this for hours and my current solution only works sometimes, it's not consistent because the url sync isn't always called in time thus the state does not update when the url updates. I'm correctly identifying when the back button is hit but it's not refreshing the state. Right now, I have to use a location.assign and yet it only works some of the time. Is there anyway to resync the deferIntercept in angular ui router?
function bind(propGetters,
getUrl) {
let unwatch = this._$rootScope.$watchGroup(propGetters, () => {
let trimmedUrl = getUrl();
let remove = this._$rootScope.$on('$locationChangeSuccess', () => {
this._$rootScope.disableBackButton = false;
remove();
});
this._$rootScope.disableBackButton = true;
if (!this._$rootScope._hitBackButton) {
this._$rootScope.shouldSync = false;
this._$location.url(trimmedUrl);
}
});
return {
unbind(): void {
unwatch();
}
};
module.run(
($urlRouter, $rootScope) => {
$rootScope.shouldSync = true;
$rootScope.$on('$locationChangeSuccess', e => {
if ($rootScope.shouldSync) {
$urlRouter.sync();
} else if (!$rootScope._hitBackButton) {
e.preventDefault();
}
$rootScope.shouldSync = true;
});
$rootScope.$on("$stateChangeSuccess", (event, toState, toParams, fromState, fromParams) => {
if ($rootScope.previousState) {
if ($rootScope.previousState.name !== fromState.name && !$rootScope.disableBackButton) {
$rootScope.previousState = lodash.merge(fromState, { params: fromParams });
console.log($rootScope.previousState.name, 'previousState');
}
} else {
this._$rootScope.previousState = lodash.merge(fromState, { params: fromParams });
}
});
$rootScope.$on('$locationChangeSuccess', (evt, newUrl, oldUrl) => {
$rootScope.actualPrevious = oldUrl;
if ($rootScope._hitBackButton) {
this._urlProvider.sync();
$rootScope._hitBackButton = false;
}
});
$rootScope.$on('$locationChangeStart', (evt, newUrl, oldUrl) => {
if ($rootScope.actualPrevious === newUrl && $rootScope.previousState && !$rootScope.disableBackButton && !$rootScope._hitBackButton) {
$rootScope.shouldSync = true;
event.preventDefault();
console.log('hit back', $rootScope.previousState.name);
$rootScope._hitBackButton = true;
window.location.assign(this._urlService.getFullPath(this._$state.href($rootScope.previousState.name, $rootScope.previousState.params)))
// this._$state.go($rootScope.previousState.name, $rootScope.previousState.params, { reload: true }); - this doesn't seem to always work because of watch collisions?
}
});
$urlRouter.listen();
});

Answer 1

After playing around for 5 hours,
I found it's best to avoid using deferIntercept all together and instead reloadOnSearch: false like so
$stateProvider.state('app.restaurant', {
url: '/restaurant/{slug}?param1&param2&param3',
resolve: {
param1: function 1,
param2: function 2,
param3: function 3
},
reloadOnSearch: false,
params: {
slug: { value: null },
},
controller: 'restaurantController',
template:
});
Note you will have to use deferIntercept for slashes instead of params. I'd strongly advise using params if your url changes. The back button should work fine with my solution above minus the deferIntercept and plus the reloadOnSearch: false

Answer 2

Full modified implementation:
this._$rootScope.$on('$locationChangeStart', (evt, newUrl, oldUrl) => {
if (this._$rootScope.actualPrevious === newUrl && this._$rootScope.previousState && !this._$rootScope._hitBackButton) {
evt.preventDefault();
this._$rootScope._hitBackButton = true;
this._$state.go(this._$rootScope.previousState.name, this._$rootScope.previousState.params);
}
});
this._$rootScope.$on("$stateChangeSuccess", (event, toState, toParams, fromState, fromParams) => {
if (this._$rootScope.previousState) {
if (this._$rootScope.previousState.name !== fromState.name) {
this._$rootScope.previousState = lodash.merge(fromState, { params: fromParams });
}
} else {
this._$rootScope.previousState = lodash.merge(fromState, { params: fromParams });
}
});
this._$rootScope.$on('$locationChangeSuccess', (evt, newUrl, oldUrl) => {
this._$rootScope.actualPrevious = oldUrl;
if (this._$rootScope._hitBackButton) {
this._$rootScope._hitBackButton = false;
}
});