Persisting query string with AngularJS routing

Question

I've been working on a large Angular app for almost a year now and I'm stuck trying to do what I expected to be trivial.

Here are two routes I have with params (shortened for brevity):

/a/:id
/a/:id/b

Let's say the user is at /a/1 and the query string is modified, for example:

/#/a/1?foo=123&bar=456

I want to have a link on the page that directs the user to the second route /a/1/b while maintaining the query string, so the end result is a redirection to:

/#/a/1/b?foo=123&bar=456

I am using Angular 1.2 and the new ngRoute module.

What is the best way to achieve this behavior?

Edit: I should mention I have a working solution right now that seems terrible to me. The link is bound to an ng-click handler which is essentially the following:

$scope.navigateToBClick = function() {
  var path = $location.path() + '/b',
    search = $location.search();
  $location.url(path + '?' + $.param(search));
};

have you figured out another solution yet? This does seems terrible to me. — mr1031011
– mr1031011, Commented Jan 15, 2014 at 16:21
you could just call $location.path($location.path()+ '/b'); instead of what you are doing. The search string will be appended when changing routes using path. Explain what you find terrible please. — masimplo
– masimplo, Commented Feb 13, 2014 at 1:33
I have the exact opposite problem. My query string always persists, and I don't want it to do so. I'm using the default $locationProvider.html5Mode = false. I imagine if we resolve one problem, the other will be trivial. Also, my links are in <a> tags. I'm wondering if this is part of the issue. — panesofglass
– panesofglass, Commented Oct 28, 2014 at 19:04

Lukas · Accepted Answer · 2015-07-22 23:29:07Z

5

+50

I'm not sure if you would consider this a better solution than what you've got, but it is a solution.

In your initialization code, add the following:

app.run(["$rootScope", function ($rootScope) {
    $rootScope.$on("$routeChangeSuccess", function (e, current) {
        $rootScope.query = $.param(current.params);
    });
}]);

Then, in your HTML, make your links as follows:

<a ng-href="#/a/{{id}}/b?{{query}}">Navigate to B</a>

edited Jul 22, 2015 at 23:29

answered Feb 12, 2014 at 16:46

Lukas

9,8452 gold badges39 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brett Over a year ago

Consider using ng-href instead of href when you have {{}} in your url. See docs.angularjs.org/api/ng/directive/ngHref

Buli · Accepted Answer · 2014-02-12 22:50:16Z

If i understand correctly the question then we can solve it with $locationChangeStart $rootScope event. This is done in run phase. Basic idea is : on every location change we will check if we had query string in url (searching for '?' in the url, if there is query string , then we add it to the new url.

    angular.module('your_module').run(function ($rootScope) {
      $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {

      // If we have queryString on currentURL , then we will add it to the next url
        if(oldUrl.indexOf('?') >= 0) {
         // this can be optimized if we want to check first for queryString in the new url,
         // then append only new params, but that's additional feature.
        newUrl += '?' + oldUrl.split('?')[1];
      }
   });

In HTML we just call $location.path('a/1/b') , url params (query strings) will be added automatically.

madhured · Accepted Answer · 2014-02-12 19:54:59Z

0

if route is /#/a/1?foo=123&bar=456 then redirect to /#/a/1/b?foo=123&bar=456

I have worked on /#a?foo=bar to /#b?foo=bar, it can be easily tweaked to /#a/b?foo=bar and used angular-route-segment library.

Run the plunker at http://run.plnkr.co/HvSyw4aMUiy1mwC3/#/firstRoute?foo=bar

and see the code here

http://plnkr.co/edit/ylFM8BHRXpqpMV7QVEcJ

Please let me know if it works.

answered Feb 12, 2014 at 19:54

madhured

4432 silver badges8 bronze badges

Comments

gkond · Accepted Answer · 2014-02-13 00:15:21Z

0

Another solution I've found so far is to trace all $location.search() changes and store $window.location.search in a scope variable after each search change.

Then just add this scope variable to all anchors in a template:

<a ng-href="/projects/{{ projectId }}{{ queryString }}">
    Title
</a>

In this case both routes reads scope variables from routeParams query string and uses $scope.$watch on those variables to reflect changes in $location.search and thus in anchors href attributes accordingly.

edited Feb 13, 2014 at 0:15

answered Feb 12, 2014 at 23:54

gkond

4,3922 gold badges22 silver badges27 bronze badges

Comments

Saidh · Accepted Answer · 2014-10-23 06:33:55Z

0

//Controller

$scope.menu = {path:"admin", name: "Administration"};
var queryString = $location.$$url.split("?")[1];
if (queryString) {
    $scope.queryString = "?" + queryString;
}

//View

<a ng-href="#/{{menu.path}}{{queryString}}">{{menu.name}}</a>

answered Oct 23, 2014 at 6:33

Saidh

1,1411 gold badge12 silver badges21 bronze badges

Comments

panesofglass · Accepted Answer · 2014-10-28 22:01:35Z

0

Here is the solution I used that caused persistent query string propagation (that I didn't want).

el.find('li').has('ul').on('click', 'a', function (e) {
    // handle clicks manually
    e.stopPropagation();
    // if the anchor tag has a specific class
    if (el.hasClass('link')) {
        var path = el.attr('href').replace('#', '');
        scope.$apply(function () {
            // changing the path changes only the path
            // the query string is left intact
            $location.path(path);
        });
    }
});

answered Oct 28, 2014 at 22:01

panesofglass

2673 silver badges10 bronze badges

Collectives™ on Stack Overflow

Persisting query string with AngularJS routing

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related