Angular JS 'route' doesn't match component with %2F (encoded '/')

I have a 'route' in Angular JS as follows

$routeProvider.when('/foos/:fooId', { controller: FooController, templateUrl: 'foo.html'});

and it works great, unless the :fooId component contains either a '/' or '%2F' (encoded form)

How can I make this work, my 'fooId' can contain /s ?



You can't easily do this because if you use a link with %2F in it, the browser will just decode it for you and it'll end up being /. AngularJS currently doesn't allow you to use / in $route params.

You can double encode it, like in this plnkr:

var app = angular.module('app', []);

app.controller('HomeCtrl', function ($scope, $route) {
app.controller('DirCtrl', function ($scope, $route) {
  var p = $route.current.params;

  $scope.path = decodeURIComponent(p.p1);

app.config(function ($routeProvider) {
            .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
        .when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
            .otherwise({redirectTo: '/'});


And the link would be: <a href="#/dir/a%252Fb%252Fc">click here</a>.

Another option, if you have a set number of / characters in your parameters can be found here: How can I make the angular.js route the long path


Based on the answer of Langdon, I created a filter which encodes everything twice, and another one which decodes:

.filter('escape', function() {
        return function(input) {
            return encodeURIComponent(encodeURIComponent(input));

.filter('unescape', function() {
        return function(input) {
            return decodeURIComponent(input);

I use this in my product links as follows:

<a href="#/p/{{}}/{{ | escape}}">

On the product page, I decode the product name:

<h1>{{ | unescape}}</h1>

You need not to encode anything here. Just add * in your path Param as mentioned below and enable html5Mode

 app.config(function ($routeProvider, $locationProvider) {
.when('/home', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/base/:path*', {templateUrl: 'path.html', controller: 'pathCtrl'})
.otherwise({redirectTo: '/home'});

  enabled: true,
  requireBase: false

include $locationProvider.hashPrefix(''); in your config.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.