Angular ui-sref encode parameter

Question

My router looks like that:

.state('project', {
        'url': '/project/*path',
        'controller': 'ProjectController',
        'templateUrl': '/pages/project.html',
    });

but when I use

ui-sref="project({path: mypath})"

with mypath=part1/part2 I expect the it to turn into /project/part1/part2 but instead i get /project/part1%252Fpart2.

How can I make it pass parameter without encoding it ?

score 10 · Accepted Answer · answered Jan 08 '15 at 22:13

As it was described here, you need to declare custom variable type for URL param in order to have slashes not encoded. Quoting comment from github:

If you really don't want the slash encoded for you, register a custom type with your regexp and declare item_id to be your custom type, i.e., url: /{item_id:MyType}

function valToString(val) { return val != null ? val.toString() : val; }
function valFromString(val) { return val != null ? val.toString() : val; }
function regexpMatches(val) { /*jshint validthis:true */ return this.pattern.test(val); }
$urlMatcherFactory.type("MyType", {
  encode: valToString,
  decode: valFromString,
  is: regexpMatches,
  pattern: /[^/]+\/[^/]+/
});

Do you have any solution how i can disable slash encoding if otherwise (404) state is activated (url: "*path")? — Vlatko, Jan 09 '15 at 22:28
[Don't specify path for your 404 error page.](http://stackoverflow.com/a/25722055/878514) — fracz, Jan 09 '15 at 22:35

score 2 · Answer 2 · answered May 27 '15 at 06:36

To resolve this problem you can change a state by using $location.path(), which has slashes in stateparams. For example if our state is like this:

app.js

.state('project', {
    'url': '/project/*path',
    'controller': 'ProjectController',
    'templateUrl': '/pages/project.html',
});

In this case path param may contains multiple slashes .If path=part1/part2 then you get route like this /project/part1%252Fpart2 by using ui-sref or $state.go(). So to get correct routing (i.e. /project/part1/part2), use $location.path() to change a state.

HTML:

<a ng-click="goToMyState()">{{label}}</a>

Controller :

$scope.goToMyState = function () {
    var path = '/part1/part2'
    $location.path('/project' + path);
};

score 2 · Answer 3 · answered Apr 06 '17 at 21:10

in new ui-router 1.0 we can use raw:true param which will disable url-encoding of parameter as described here

    //link to state
<md-button ui-sref="content({slug:'hello-world/'})">Hello world</md-button>

$urlMatcherFactoryProvider.type('SlashFix', {
      raw:    true,
    });


    $stateProvider
      .state('content',{
       url: '/{slug:SlashFix}',
       ...

More detailed explanation can be found here:

https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix

Angular ui-sref encode parameter

3 Answers3

Linked