angolare JS 'route' non corrisponde componente% 2F (codificato '/')

Question

Ho un 'percorso' in angolare JS come segue

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

e funziona benissimo, a meno che il: componente fooId contiene un '/' o '% 2F' (forma codificata)

Come posso fare questo lavoro, il mio 'fooId' può contenere/s?

Answer 1

Non è possibile farlo facilmente perché se si utilizza un collegamento con %2F in esso, il browser lo decodificherà per voi e finirà per essere /. Attualmente AngularJS non consente di utilizzare / nei parametri $route.

È possibile fare doppio codificare, come in questo 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: '/'}); 

}); 

E il link potrebbe essere: <a href="#/dir/a%252Fb%252Fc">click here</a>.

Un'altra opzione, se si dispone di un certo numero di / caratteri nei parametri può essere trovato qui: How can I make the angular.js route the long path

Answer 2

Sulla base della risposta di Langdon, ho creato un filtro che codifica per tutto due volte, e un altro che decodifica :

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

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

ho usare questo nella mia link di prodotti come segue:

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

Sulla pr Pagina di oduzione, decodificare il nome del prodotto:

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

Answer 3

Non è necessario codificare nulla qui. Basta aggiungere * nel tuo percorso Param come indicato di seguito e consentire 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 
}); 

Answer 4

includono $ locationProvider.hashPrefix (''); nella tua configurazione.