角JS「路線」如下</p> <pre><code>$routeProvider.when('/foos/:fooId', { controller: FooController, templateUrl: 'foo.html'}); </code></pre> <p>不匹配％2F組件（編碼「/」）

Question

我在角JS有一個「路線」與它的偉大工程，除非：fooId組件包含'/'或'％2F'（編碼形式）

如何使這項工作，我的'fooId'可以包含/ s？

Answer 1

你不能輕易做到這一點，因爲如果你在其中使用了一個帶有%2F的鏈接，瀏覽器將會爲你解碼它，它將最終成爲/。 AngularJS目前不允許您在$route params中使用/。

您可以雙擊編碼它，就像這個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>。

另一種選擇，如果你已經在你的參數/字符集數可以在這裏找到：How can I make the angular.js route the long path

Answer 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}}"> 

在PR我解碼產品名稱：

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

Answer 3

你不需要在這裏編碼任何東西。只需在您的路徑帕拉姆添加*如下所述，使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

包括 $ locationProvider.hashPrefix（ ''）; 在您的配置。