AngularJS 将我的 ng-href url“斜杠”转换为“%2f”答案

【问题标题】：AngularJS converting my ng-href url "slash" into "%2f"AngularJS 将我的 ng-href url“斜杠”转换为“%2f”
【发布时间】：2014-09-08 23:16:55
【问题描述】：

我有一个 angularJS 应用程序，它是一个画廊。对于每张图片，与之关联的是ng-href 和#/{{files.id}}。

<a ng-href="#/{{files.id}}"...

但是，当我点击它时，最终显示的网址是

http://localhost:3000/gallery#%2F0

这破坏了我的角度路由

when('/gallery/:imageID', { templateUrl: 'load_image.html' }).

有人可以向我解释如何正确编码 URL 吗？或者只是使用不编码正斜杠的东西？

【问题讨论】：

你试过没有#吗？
就我而言，我必须删除 $locationProvider.html5Mode(true);
@LarissaLeite 删除 html5More(true) 将使用 # 或 #/ 写入您的网址 - 只需使用 / 而不是 #/ 即可解决我的问题。
How to generate url encoded anchor links with AngularJS?的可能重复
URL hash-bang (#!/) prefix instead of simple hash (#/)的可能重复

标签： javascript angularjs url-routing

【解决方案1】：

你不需要在这里编码任何东西。只需在您的路径参数中添加 *，如下所述并启用 html5Mode

  app.config(function ($routeProvider) {
     $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
    });

【讨论】：

【解决方案2】：

由于aa077e8，用于 $location hash-bang URL 的默认哈希前缀已从空字符串 ('') 更改为 bang ('!')。

你应该试试这个。

index.html

<li class="active"><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>

app.js

angular.module('appRoutes',['ngRoute'])
.config(function($routeProvider, $locationProvider){   

    $locationProvider.hashPrefix('');

    $routeProvider
        .when('/',{
            templateUrl:'app/views/pages/home.html'
        })
        .when('/about',{
            templateUrl:'app/views/pages/about.html'
        });
 });

【讨论】：

谢谢！这工作正常。 OP应该已经接受了这个答案。

【解决方案3】：

有两种解决方案：

不推荐：添加！在你的锚点中：

默认的 hash bang 已从 "" 更改为 "!"角度，因为它不太可能改变，你可以简单地养成添加“#！”的习惯。在你的锚标签而不是“#”中。

推荐：使用 $locationProvider：

使用

$location.hashPrefix("")

在你的模块配置中使用空字符串作为哈希爆炸就像过去一样！！

【讨论】：

添加!# 现在已被弃用，不是吗？我只使用标准 html /my-url 没有任何哈希或刘海，它适用于 1.6.4（html5 模式启用）