it-swarm.com.de

Angularjs Normal Links mit html5Mode

Ich arbeite mit AngularJS in HTML 5-Modus. Welches scheint die Kontrolle über alle href's auf der Seite zu übernehmen. Aber was ist, wenn ich einen Link zu etwas in der gleichen Domain der App haben möchte, aber nicht wirklich in der App. Ein Beispiel wäre ein PDF.

Wenn ich mache <a href="/pdfurl"> angular versucht nur, den html5-Modus zu verwenden und mithilfe des Routenanbieters zu bestimmen, welche Ansicht geladen werden soll. Ich möchte jedoch, dass der Browser auf die normale Weise zu dieser Seite wechselt.

Ist die einzige Möglichkeit, dies zu tun, eine Regel mit dem Routenanbieter zu erstellen und diese auf die richtige Seite mit window.location umleiten zu lassen?

76
mfrancis107

im HTML5-Modus gibt es drei Situationen, in denen das A-Tag nicht umgeschrieben wird: von Angular Docs

  • Links, die ein target -Attribut enthalten. Beispiel: <a href="/ext/link?a=b" target="_self">link</a>
  • Absolute Links, die auf eine andere Domain verweisen Example: <a href="http://angularjs.org/">link</a>
  • Links, die mit '/' beginnen und zu einem anderen Basispfad führen, wenn base definiert ist Example: <a href="/not-my-base/link">link</a>

ihr Fall wäre also 1. Addieren Sie target="_self"

145
Eduard Gamonal

Ab Angular v1.3.0 gibt es eine neue rewriteLinks Konfigurationsoption für den Standortanbieter, mit der alle Links auf der Seite "entführt" werden aus:

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

Während die Deaktivierung dieses Verhaltens für alle Links möglicherweise nicht Ihre Absicht ist, veröffentliche ich dies für andere, die wie ich $location Im HTML5-Modus nur verwenden möchten, um die URL zu ändern, ohne alle Links zu beeinflussen.

33
Mouagip

Wenn Sie nicht möchten, dass Angular die Kontrolle über die href übernimmt. Platzieren Sie ein Zielattribut auf dem Link.

Also wird PDF den html5mode und den routeProvider umgehen und der Browser wird einfach zu dieser URL gehen.

6
mfrancis107

Andere Lösung. Alle Links funktionieren normal (Seite neu laden). Links markiert mit ng-href="/path" wird auf pushState abgespielt. Kleine JS-Hack-Hilfe dabei.

.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);
}])
3
msa7