AngularJS конвертирует мой ng-href url "slash" в "% 2f"

У меня есть приложение angularJS, которое является галереей. Для каждого изображения, связанного с ним, есть ng-href с #/{{files.id}}.

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

Однако, когда я нажимаю на него, URL-адрес, который в конечном итоге отображается,

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

который разрушает мою маршрутизацию angular

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

Может кто-нибудь объяснить мне, как правильно закодировать URL? Или просто используйте что-то, что не кодирует косую черту?

Ответ 1

Из-за aa077e8 хэш-префикс по умолчанию, используемый для URL-адресов хеш-привязок $location, изменился с пустой строки ('' ) к удару ('!').

Вы должны попробовать это.

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

Ответ 2

Существует два решения:

Не рекомендуется: Добавить! в ваших якорях:

по умолчанию хеш-бэнг изменен с "на"! "в angular и так как это вряд ли изменится, вы можете просто добавить привычку добавлять" #! "в ваших якорных тегах вместо" #".

Рекомендуем: Используйте $locationProvider:

Используйте

$location.hashPrefix( "")

в конфигурации вашего модуля использовать пустую строку как хеш-удар, как в старые времена!

Ответ 3

Мне не нужно ничего кодировать здесь. Просто добавьте * в свой путь Param, как указано ниже, и включите 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
    });