Angular JS 'route' не соответствует компоненту с% 2F (закодированный '/')

У меня есть "маршрут" в Angular JS следующим образом

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

и он отлично работает, если только: fooId компонент содержит либо '/', либо '% 2F' (закодированная форма)

Как я могу выполнить эту работу, мой "fooId" может содержать/s?

Ответ 1

Вы не можете легко сделать это, потому что если вы используете ссылку с %2F в нем, браузер просто расшифрует его для вас, и в итоге это будет /. В настоящее время AngularJS не позволяет использовать / в параметрах $route.

Вы можете дважды закодировать его, как в этом plnkr: http://plnkr.co/edit/e04UMNQWkLRtoVOfD9b9?p=preview

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) {
    $routeProvider
            .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
        .when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
            .otherwise({redirectTo: '/'});

});

И ссылка будет следующей: <a href="#/dir/a%252Fb%252Fc">click here</a>.

Другой вариант, если у вас есть заданное число / символов в ваших параметрах, можно найти здесь: Как я могу сделать маршрут angular.js длинным путем

Ответ 2

Основываясь на ответе Лэнгдона, я создал фильтр, который кодирует все дважды, и другой, который декодирует:

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

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

Я использую это в своих ссылках на продукты следующим образом:

<a href="#/p/{{product.id}}/{{product.name | escape}}">

На странице продукта я декодирую имя продукта:

<h1>{{product.name | unescape}}</h1>

Ответ 3

Вам не нужно ничего кодировать. Просто добавьте * в свой путь Param, как указано ниже, и включите html5Mode

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

 $locationProvider.html5Mode({
  enabled: true,
  requireBase: false
 });

Ответ 4

включают $ LocationProvider.hashPrefix( ''); в вашей конфигурации.