ConfusedNoob ConfusedNoob - 4 months ago 12x
AngularJS Question

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