Custom parameter types

Other topics

Page number parameter

Similar to int but accepts only positive integers (useful for pagination when there is a page parameter.

Define:

module.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {
  $urlMatcherFactory.type('page', {
    decode: function(val) { return +val; },
    encode: function(val) { return Math.floor(val); },
    equals: function(a, b) { return this.is(a) && +a == +b; },
    is: function(val) { return angular.isNumber(val) && val >= 1; },
    pattern: /\d+/
  })
}]);

And use:

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

Plunker and related SO answer.

Boolean parameter

Define:

module.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {
  $urlMatcherFactory.type('boolean', {
    decode: function(val) { return val == true || val == "true" },
    encode: function(val) { return val ? 1 : 0; },
    equals: function(a, b) { return this.is(a) && a == b; },
    is: function(val) { return [true, false, 0, 1].indexOf(val) >= 0 },
    pattern: /false|true|0|1/
  })
}]);

And use:

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

Plunker and related SO answer.

Path parameter (with not-encoded slash inside)

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.

Parameters:

ParameterDetails
decodeConverts URL value (string) to the value available in $stateParams
encodeConverts a value to the string that will be used in the URL
equalsVerifies if two values are equal from the type's point of view
isChecks if the value can be used as defined parameter type
patternEnsures that the values from URL matches this pattern when route resolves

Contributors

Topic Id: 2031

Example Ids: 6636,6637,7197

This site is not affiliated with any of the contributors.