angular-ui-router Custom parameter types Path parameter (with not-encoded slash inside)


Example

By default, ui-router encodes the slash / inside parameters. If you want to send a path in the URL, you need to define a custom parameter type.

Define:

module.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {
  $urlMatcherFactory.type('path', {
    decode: function(val) { return val != null ? val.toString() : val; },
    encode: function(val) { return val != null ? val.toString() : val; },
    is: function(val) { return this.pattern.test(val); },
    pattern: /[^/]+\/[^/]+/
  })
}]);

And use:

$stateProvider.state({
  url: '/my-route/{directory:path}'
  template: '<my-page></my-page>'
});

Related question.