18

我在 Angular JS 中有一个“路线”，如下所示

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

并且效果很好，除非 :fooId 组件包含“/”或“%2F”（编码形式）

我怎样才能使这项工作，我的 'fooId' 可以包含 /s ？

4

4 回答 4

13

你不能轻易做到这一点，因为如果你%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 路由长路径

于 2013-05-19T02:59:33.373 回答
5

根据 Langdon 的回答，我创建了一个过滤器，它对所有内容进行两次编码，另一个进行解码：

.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>
于 2014-09-29T12:59:28.190 回答
5

你不需要在这里编码任何东西。只需在您的路径参数中添加 * 如下所述并启用 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
 });
于 2016-06-07T11:24:06.230 回答
1

包括 $locationProvider.hashPrefix(''); 在你的配置中。

于 2017-01-25T10:12:08.363 回答