how to pass the query parameter with the othwerwise function

Question

Given the following javascript:

$stateProvider
  .state('search', {
    url: '/search?query',
})   
;

$urlRouterProvider.otherwise("search");

When I access the page

base_url?query=x

I get redirected to

base_url/search

but the query parameter gets lost.

Is there a way to pass the query parameter with the otherwise function?

score 9 · Accepted Answer · edited May 23 '17 at 12:33

9

There is a working plunker

The UI-Router has native solution here.

The otherwise does not have to be the "url" string, it could be a function.

Check it in action in this Q & A:

How not to change url when show 404 error page with ui-router

The code could be like this:

$urlRouterProvider.otherwise(function($injector, $location){
    var state = $injector.get('$state');
    state.go("search", $location.search()); // here we get { query: ... }
    return $location.path();
});

The $location.search() will give us params object, which could be like: { query: ... }. We take it and redirect to state search with this params...

Check it here

edited May 23 '17 at 12:33

Community

1
1

answered May 03 '15 at 05:07

Radim Köhler

122,561
47
239
335

It does not work for me with html5mode enabled. Also in the plunkr it is commented out. May you please bring an example with html5enabled on? I get sort of redirected twice. I printed console.log($location,$location.path(), $location.search());. The first time i get "/" Object {vid: "Auto1"} and then "/" Object {} – David Michael Gang May 03 '15 at 07:48
1

*I am not fan or user of html 5 mode,* but here you are the adjusted version: http://plnkr.co/edit/yrfOXMeaCJEKt08ihw00?p=preview. In a nutshell: Do not forget to include proper "absolute" url... because we are not living in safe are, doing safe routing after hash #... – Radim Köhler May 03 '15 at 08:00
I think that there is no need to write return $location.path();. This triggers an additional state redirect while we issued already a state redirect with the state.go function. – David Michael Gang May 03 '15 at 14:14
I appended some console log, to this fork http://plnkr.co/edit/uLFCZHkiUOHk4STvTux6?p=preview to show that my plunker should be working well. Most importantly, as the [doc saysg(http://stackoverflow.com/a/25591908/1679310): otherwise must be: *The url path you want to redirect to or a function rule that returns the url path.* so we have to (shuold) return that... Hope it helps a bit... – Radim Köhler May 03 '15 at 16:55

Leo · Answer 2 · 2016-08-03T02:17:16.257

You don't need to grab injector and $state.go, not at all. The argument to otherwise method can be a URL path, which can contain parameters in it.

So in your particular case, following code can lead you to base_url/search?query=x

$urlRouterProvider.otherwise("/search?query=x");

Alternatively, the argument can be a function that returns a URL path. If you are not sure what URL parameters it could have, you just need to get the parameters from $location then format to the URL-like string and return it.

$urlRouterProvider.otherwise(function($injector, $location) {
    var params = $location.search()

    // format params to 'p1=v1&p2=v2' style
    var formatted = Object.keys(params).map(function(key) {
        return key + '=' + params[key]
    }).join('&')

    return '/search?' + formatted
});

how to pass the query parameter with the othwerwise function

2 Answers2