Problem with reloadOnSearch: false - change in stateParams doesn't reload

[OriaLogic]

Here is my issue:

I navigate through a list of links, that display different images depending on the date in the search parameters (?from&to).

Those search parameters should not trigger a state reload. Finally, here is my state declaration:

state('links/:linkId', {
  url: "/links/linkId?from&to",
  reloadOnSearch: false,
  templateUrl: ...
  Controller: ...
});

But then a huge problem shows up! When I try to navigate through my different links, reload doesn't happen anymore, so that I cannot pass from one link to another.

After some digging in the code, I found out that when reloadOnSearch equals to false, triggers are always blocked because there's absolutely no checking of whether the changing parameters are search parameters or path parameters.

So actually, reloadOnSearch doesn't work as intended and should be renamed reloadOnStateParamsChange.

I fixed the issue by checking if the state parameters that changed are search parameters or not, which seems to work fine.

Please tell me if I'm mistaking somewhere or if it is relevant, and also if you would be interested in a pull request or a plunkr.

Thanks in advance!

[timkindberg]

You are right that it doesn't care about which type of param. It was a quick fix for a large problem. A more official feature is now in master; typed params. We may even ditch this config property now.

@nateabele you think we should get rid of reloadOnSearch?

[nateabele]

@timkindberg Yeah, it's getting killed off in the next release.

[TEHEK]

Hi!

Please consider those of us who migrate from ngRouter.

I've recently switched my large application from using ngRouter to uiRouter. And it wasn't easy...

The main difference here is that reloadOnSearch in ngRouter means that the same instance of the controller is going to be re-used. Typed query params are nice, but they are not the same. Basically, whenever a param changes, a new instance of controller is instantiated. Re-factoring this can be pretty huge.

Any way we can fix the reloadOnSearch instead?

[pholly]

@timkindberg @nateabele I also don't see how typed parameters can replace reloadOnSearch's documented purpose. I want to define a query string parameter on a state and not reload the state if the query string parameter changes while I'm on that state.

[pholly]

@TEHEK A workaround is to make your state abstract and define reloadOnSearch true (which it is by default) and create a child state that only defines a url with the query string parameters you want to not cause a state reload.

E.g.:

.state('contacts', {
  url: '/contacts',
  abstract: true,
  template: '<h1>Contacts</h1>',
  controller: ['$scope', 
      function($scope) {
         //will not reload controller or view when contacts.content state changes
      }], 
   onEnter: function() {
      console.log("OnEnter: contacts");
  }
})
.state('contacts.content', {
  url: '?param1&param2&interestedDirectivesWillWatchMe',
  onEnter: function() {
      console.log("OnEnter: contacts.content");
  }
})

I'm having the same problem. I've divided up my stateParams into a structure where all the optional params that I don't want to cause a reload are in the querystring, and all the required params are in the base URL. But I can't navigate to the same state with a different param (no matter what I try, the state will not reload because I have reloadOnSearch set to false) using $state.go or transtitionTo... I've tried all the options {reload: true, inherit: false, location: true}. I've also tried to call $state.reload() which also did absolutely nothing.

I definitely need something like reloadOnSearch to allow some stateParams to change without the state reloading... but I need other params to cause a reload. If reloadOnSearch did what it's name implies (only prevent reload when the querystring params change), it would be fine... but it appears to kill all reloading, even forced ones.

[nateabele]

@pholly @TEHEK In and of themselves, typed parameters don't replace reloadOnSearch. What will replace reloadOnSearch is dynamic parameters, which is currently partially implemented in master, and will be fully-realized in the next release, this will give you per-parameter (query string parameters or normal URL parameters) disabling of controller reload, and the ability to watch parameter changes.

[cmcnamara87]

+1. Tried the workaround from @pholly, but because the optional parameters are on a child state, the parent controller doesn't have access to them through $stateParams. $state.params also doesn't work as it is first loaded with the parent's params, and then the child's params are added, but since the parameters are optional, there is no way to know when/if that will happen in the parent.

[pholly]

@cmcnamara87 You can use $scope.$watch to watch $state.params in the parent controller or in any directives in the view(s) of the parent state or any ancestor state.

I typically need to watch a subset of $state.params so I use $scope.$watchCollection with an anonymous object as a parameter.

E.g.

//this assumes $state is on the $scope - $scope.$state
$scope.$watchCollection("{param1: $state.params.param1, param3: $state.params.param3}", function(newVal, oldVal, scope){
  //$state.params.param1 or $state.params.param3 changed - do stuff
  //old values are in oldVal.param1 and oldVal.param3
});

[just-boris]

original angular ngRoute module has same reloadOnSearch config. But they ignore reloads only search params not url segments. And it's good for me, so I propose to do same behavior there and add another option reloadOnParamsChange if needed

[nawlbergs]

I can also confirm this issue. I'm using search parameters to store minor ui variables within a route/view.
e.g.
#/user/123/reports?from=today&to=tomorrow
and cannot change the users id.