Нормальные ссылки Angularjs с html5Mode

Я работаю с угловыми в режиме html 5. Кажется, что он контролирует все href на странице. Но что, если я хочу иметь ссылку на что-то в том же домене приложения, но не на самом деле в приложении. Примером может служить pdf.

Если я делаю <a href="/pdfurl"> angular, попробую использовать html5mode и использовать поставщик маршрута для определения того, какой вид должен быть загружен. Но я действительно хочу, чтобы браузер пошел на эту страницу обычным способом.

Единственный способ сделать это - создать правило у поставщика маршрутов и перенаправить его на нужную страницу с помощью window.location?

Ответ 1

в режиме HTML5 существует три ситуации, в которых тег A не перезаписывается: из angular docs

Ссылки, содержащие атрибут target. Пример: <a href="/ext/link?a=b" target="_self">link</a>
Абсолютные ссылки, указывающие на другой домен Example: <a href="http://angularjs.org/">link</a>
Ссылки, начинающиеся с '/', которые приводят к другому базовому пути, когда base определен Example: <a href="/not-my-base/link">link</a>

поэтому ваш случай будет 1. добавить target="_self"

Ответ 2

Как и в случае с Angular v1.3.0, для поставщика местоположения существует новая опция rewriteLinks. Это переключает "захват" всех ссылок на странице:

module.config(function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false
    });
});

В то время как disablig это поведение для всех ссылок может быть не вашим намерением, я отправляю это для других, которые, как и я, хотят использовать $location в режиме html5 только для изменения URL-адреса, не затрагивая всех ссылок.

Ответ 3

Если вы не хотите, чтобы Angular взял управление href. Поместите целевой атрибут в ссылку.

Таким образом, PDF передаст html5mode и routeProvider, и браузер просто перейдет к этому URL-адресу.

Ответ 4

Другое решение. Все ссылки будут работать нормально (перезагрузить страницу). Ссылки, отмеченные ng-href="/path", будут воспроизводиться на pushState. Небольшой взлом JS поможет в этом.

.config(["$locationProvider", function($locationProvider) {
    // hack for html5Mode customization
    $('a').each(function(){
        $a = $(this);
        if ($a.is('[target]') || $a.is('[ng-href]')){
        } else {
            $a.attr('target', '_self');
        }
    });

    $locationProvider.html5Mode(true);
}])