Preventing state reload on URL change

[roryf]

I currently use the following code to prevent my route, and therefore controller, being reloaded when I update the $location:

angular.module('Shared').service('location', function($location, $route, $rootScope) {
  $location.skipReload = function () {
    var lastRoute = $route.current;
    var un = $rootScope.$on('$locationChangeSuccess', function () {
        $route.current = lastRoute;
        un();
    });
    return $location;
  };
  return $location;
});

along with:

location.skipReload().path("/newpath").replace();

Can I achieve the same behaviour with ui-router?

I tried simply replacing $route above with $state but this still resulted in a state change. My use case is I only have 'new' and 'edit' states which are exactly the same, when a user saves within the 'new' state I want to update the URL to include the saved id but not reload the view.

[roryf]

For anyone interested, the solution was:

angular.module('Shared').service('location', function($location, $rootScope) {
  $location.skipReload = function () {
    var un = $rootScope.$on('$stateChangeStart', function (event) {
        event.preventDefault();
        un();
    });
    return $location;
  };
  return $location;
});

[bdecarne]

Hi,

I need this exact feature.

Your first solution work as expected : the URL is updated without reload the view.

Your second one with ui-router doesn't work as expected : it doesn't reload the view but the URL update is canceled. So neither reload ans update occurs.

Did you miss something in your solution ?

@see #64

[roryf]

Yeah, the code above took advantage of a bug in ui-router that since got fixed, I didn't realise it at the time. We're now using this, which also uses the decorator pattern rather than adding a new service:

function locationDecorator($location, $rootScope) {
  var skipping = false;

  $rootScope.$on('$locationChangeSuccess', function(event) {
    if (skipping) {
      event.preventDefault();
      skipping = false;
    }
  });

  $location.skipReload = function() {
    skipping = true;
    return this;
  };

  return $location;
}

angular.module('Shared').config(['$provide', function($provide) {
    $provide.decorator('$location', locationDecorator);
  }]);

and can be used as

$location.skipReload().path('/new/path').replace();

[msafi]

Hmm, what's wrong with using reloadOnSearch: false which is supported by both ngRoute (see docs) and ui.router (see docs)?

[roryf]

If my understanding of reloadOnSearch is correct, it only changes behaviour when the query string or hash change, not the URL path, which is what was required here.

[andremendonca]

@roryf your new version to skip reload is not working - view still reloads after calling $location.path. At least for me. This is the event call order I have:
1 - $locationChangeStart
2 - $stateChangeStart
3 - $locationChangeSuccess
4 - $stateChangeSuccess

As far as I understand, when we preventDefault on "$locationChangeSuccess" ui-router already did the work.

[nateabele]

Probably an event-firing order issue. We'll have to figure out an alternative solution.

[teisnet]

I got the same use case as described above (going from route "/new" to "/{id}") I hope it will be possible to have a consistent way to do this without reloading the controller. = +1

[yohaiai]

has anyone found a new solution to the problem?

[cheahkhing]

this is really bad, so far i can't find any solution yet to this problem. :(

[andremendonca]

instead of using the $location I used the $urlMatcher to get the state from a url and change the state instead of the url.

the good part of this approach is that the ui-router doesn't get lost after the url change

I created a provider to give you the idea, it setup the routing with a collection, and search the route on it, maybe it helps:
https://gist.github.com/andremendonca/06a1fbc486a4a001d871

[nateabele]

I'll have a permanent fix for this shortly. Just finishing testing.

[nateabele]

Fixed in c72d8ce. See example code here:

ui-router/src/urlRouter.js

Lines 212 to 242 in c72d8ce

	* @example
	* <pre>
	* var app = angular.module('app', ['ui.router.router']);
	*
	* app.config(function ($urlRouterProvider) {
	*
	* // Prevent $urlRouter from automatically intercepting URL changes;
	* // this allows you to configure custom behavior in between
	* // location changes and route synchronization:
	* $urlRouterProvider.deferIntercept();
	*
	* }).run(function ($rootScope, $urlRouter, UserService) {
	*
	* $rootScope.$on('$locationChangeSuccess', function(e) {
	* // UserService is an example service for managing user state
	* if (UserService.isLoggedIn()) return;
	*
	* // Prevent $urlRouter's default handler from firing
	* e.preventDefault();
	*
	* UserService.handleLogin().then(function() {
	* // Once the user has logged in, sync the current URL
	* // to the router:
	* $urlRouter.sync();
	* });
	* });
	*
	* // Configures $urlRouter's listener *after* your custom listener
	* $urlRouter.listen();
	* });
	* </pre>