2

Issue

I have an abstract route that looks like this: #/app/lists/:label.

Which is great when User creates a "label" of 'Breakfasts'.

However, when the label value is '#All', then $stateParams.label === "".

Question

How can I get Angular/-ui-router to acknowledge the octothorpe (hash sign) in the literal URL of #/app/lists/#All? ($stateParams.label)

Allowing the User to add an octothorpe, such as #All or #Public, is a necessary convention I'd like to keep for the user. What can I do to get this "label" when this character is present?

Cody
  • 9,785
  • 4
  • 61
  • 46
  • the `#` is a control character in URLs, it can't be used as a part of a parameter, just as `/`, `:`, `&`, or `?`. – Claies Apr 13 '17 at 01:36
  • A control character in Angular/UI-Router, perhaps. But `window.location.hash` provides it as part of the string value; albeit, it gives you the leading `#` as well -- but the funny thing is that Angular *doesn't* give you a `"".split('#')` value such as `"All"`. It really just bombs on this $stateParams property. – Cody Apr 13 '17 at 04:17

2 Answers2

2

You can encode and decode that param to put a '#'.

While routing to the page #/app/lists/:label where the value is '#All'

encodeURIComponent('#All');

which will return "%23All"

and when reading the data you need to decode the same in code:

decodeURIComponent("%23All");
pranavjindal999
  • 2,937
  • 2
  • 26
  • 35
0

I'm still a noob in angular. Just got curious seeing the question and found something like -- Hashbang Mode.

https://docs.angularjs.org/guide/$location

Hashbang mode simplified.

Although I'm not sure whether this will help your situation.

Md. Samsull Arefeen
  • 61
  • 1
  • 10
  • 1
    @Samsull, really appreciate the suggestion, but this doesn't seem to help. I'm beginning to think there is no solution for this but to use different characters -- or send a pull request to angular/-ui-router with a mod to their RegEx. Thx tho! – Cody Apr 13 '17 at 17:44