Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 891
Ray Suelzer Avatar asked Nov 16 '14 04:11

Ray Suelzer


People also ask

What is UI in router?

UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1. x).

What is UI sref active?

[uiSrefActive] : When this selector is used, the class is added when the target state or any child of the target state is active. [uiSrefActiveEq] : When this selector is used, the class is added when the target state is exactly active (the class is not added if a child of the target state is active).

What is stateProvider state?

$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS. So, let's move on and discuss the different methods.

What is the difference between ngRoute and UI-router?

The ui-router is effective for the larger application because it allows nested-views and multiple named-views, it helps to inherit pages from other sections. In the ngRoute have to change all the links manually that will be time-consuming for the larger applications, but smaller application nrRoute will perform faster.


1 Answers

I had a similar situation. You cannot track route updates if you had disabled reloadOnSearch, but I found a 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.

like image 170
dnemoga Avatar answered Sep 28 '22 23:09

dnemoga