Question

我在Angular JS中有一个'route'，如下所示

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

并且效果很好，除非：fooId组件包含'/'或'％2F'（编码形式）

我怎样才能做到这一点，我的'fooId'可以包含/ s？

Answer 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>。

另一个选项是，如果您的参数中有一定数量的/字符，请访问：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}}">

在产品页面上，我解码产品名称：

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

Answer 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
 });

Answer 4

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

Angular JS'route'与％2F（编码'/'）的组件不匹配

4 个答案: