Angular JS 'route' entspricht nicht Komponente mit% 2F (codiert '/')

Question

ich einen 'Weg' in Angular JS haben als

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

folgt und es funktioniert super, es sei denn, die: fooId Komponente enthält entweder ein '/' oder '% 2F' (codiertes Formular)

Wie kann ich das machen, meine 'fooId' kann/s enthalten?

Answer 1

Sie können nicht so leicht, weil tun, wenn Sie einen Link mit %2F darin verwenden, wird der Browser für Sie entschlüsseln es gerade und es wird sein / enden. AngularJS erlaubt derzeit nicht, / in $route params zu verwenden.

Sie können es doppelt kodieren, wie in diesem 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: '/'}); 

}); 

Und der Link wäre: <a href="#/dir/a%252Fb%252Fc">click here</a>.

Eine weitere Option, wenn Sie eine bestimmte Anzahl von / Zeichen haben, kann in Ihren Parametern hier: How can I make the angular.js route the long path

Answer 2

Basierend auf der Antwort von Langdon, ich einen Filter erstellt, der alles zweimal, und ein anderes codiert, das decodiert :

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

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

ich benutze diese Links in meinem Produkt wie folgt:

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

auf der pr oduct Seite, ich decode den Produktnamen:

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

Answer 3

Sie müssen hier nichts codieren. Fügen Sie einfach * in Ihrem Pfad Param, wie unten erwähnt und ermöglichen 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

umfassen $ locationProvider.hashPrefix (''); in Ihrer Konfiguration.