url encode stateparams

[pdeva]

If i pass a string like /default to $stateParams, it seems to mess up the routing:

var name = "/default";
this.$state.go("app.transactions.detail", { txnName: name });

While the controller is invoked, the url is unable to switch to.
when i encode the value before passing it to $stateparams, it works.

however, ui-router should take care of doing the encoding/decoding for me.

[johnmckay-reward]

Did you ever get anywhere with this? Having the same issue

[christopherthielen]

Can I see your state definitions? Does this work for querystring params but not path params?

[tmair]

Somehow this bugfix introduced some new issues. When transitioning to a state with state.go and a state parameter that contains a / the / is being first encoded as %2F but is then passed to encodeURIComponent which will in turn also encode the % character and break the URL

[christopherthielen]

Doesn't this encode to "%252F" which is valid encoded in a url?

[christopherthielen]

I should mention why it encodes / to %2F, then passes to encodeURIComponent. If you run $location.url("/foo/%2F"), the slash is automatically decoded and appears in the browser bar as "/foo//" which is the same as the original behavior. Encoding the slash before running the string through encodeURIComponent is necessary to get the slash encoded into the url parameter.

• $location.url("/foo/%2F"): browser location is /foo//
• $location.url("/foo/%2F"): browser location is /foo/%252F
  • decodeURIComponent: /foo/%2F
  • match and capture: /foo/ { fooid: "%25F" }
  • String type replace %2f: /foo/ {fooid: "/" }

[tmair]

Indeed it encodes to ´%252F´ within the URL if one of the parameters contains a /. I did not have enough time to investigate what states are activated and why in the end my app breaks. I will look into it more during the next days.

What is the difference in your example? As you write twice $location.url("/foo/%2F")

[tmair]

I had more time to look at the issue and came across the String.replace function, which replaces just the first occurence of /. Is that the desired behaviour or is the global flag missing?

In my use case the last parameter of the URL contains a path which may have more than one / within the parameter e.g. (paramId = 'path/whith/slashes'). What is the URL intended to be when this gets passed to state.go via a state parameter?

[christopherthielen]

Thank you for checking, that is likely the issue