AngularJS将我的ng-href url"斜杠"转换为"%2f"

For*_*low 12 javascript url-routing angularjs

我有一个angularJS应用程序,是一个画廊.对于每一个图像,相关联的与它是一个ng-href#/{{files.id}}.

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

但是,当我单击它时,最终显示的URL是

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

它破坏了我的角度路由

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

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

Abh*_*tha 13

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

你应该试试这个.

的index.html

<li class="active"><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
Run Code Online (Sandbox Code Playgroud)

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'
        });
 });
Run Code Online (Sandbox Code Playgroud)


soc*_*var 7

有两种解决方案:

不推荐:添加!在你的锚点:

默认的哈希爆炸已从""更改为"!" 在角度,因为它不会改变你可以简单地养成添加"#!"的习惯.在你的锚标签而不是"#".

推荐:使用$ locationProvider:

使用

$ location.hashPrefix( "")

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


小智 2

您不需要在这里编码任何内容。只需在路径参数中添加*(如下所述)并启用 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
    });
Run Code Online (Sandbox Code Playgroud)