update $stateParams in ui-router after $location.search() is called

Question

update $stateParams in ui-router after $location.search() is called

I have an angular application which is using the ionic-framework, which uses ui-router on the back end.

In one of my controllers I call:

$location.search('filter','sometext');

I have reloadOnSearch disabled in my routing configuration. I noticed that updating the location does not update the $stateParams. Is there a way to force the $stateParams to update as the location is updated? I looked through the ui-router documentation, but didn't see anything about this scenario, but perhaps I missed it.

angularjs
angular-ui-router
ionic-framework

Answer 1

I had have a similar situation. You cannot track route updates if you had disabled reloadOnSearch, but I found solution for this case.

Watch $stateParams:

$scope.$watchCollection('$stateParams', function (newParams) {
    var search = $location.search();

    if (angular.isObject(newParams)) {
      angular.extend(search, newParams);
    }

    $location.search(search).replace();
});

Change $stateParams, not route:

$scope.$stateParams.offset += $scope.$stateParams.limit;

Completely working example.