Angularjs Normale Links mit html5Mode

76

Ich arbeite mit AngularJS im 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 innerhalb derselben Domäne der App haben möchte, aber nicht tatsächlich in der App. Ein Beispiel wäre ein PDF.

Wenn ich <a href="https://stackoverflow.com/pdfurl">Angular mache , versuche ich einfach, den HTML5-Modus zu verwenden und benutze den Routenanbieter, um zu bestimmen, welche Ansicht geladen werden soll. Aber ich möchte eigentlich, dass der Browser diese Seite auf normale Weise aufruft.

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

angularjs mfrancis107
quelle

Antworten:

148

Im HTML5-Modus gibt es drei Situationen, in denen das A-Tag nicht neu geschrieben wird: aus den eckigen Dokumenten

  • Links, die ein targetAttribut enthalten . Beispiel:<a href="https://stackoverflow.com/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 bei baseDefinition zu einem anderen Basispfad führenExample: <a href="https://stackoverflow.com/not-my-base/link">link</a>

Ihr Fall wäre also 1. hinzufügen target="_self"

Eduard Gamonal
quelle
Was für eine seltsame Lösung, aber vielen Dank! Ich denke, Angular sollte eine schönere Möglichkeit bieten, dies zu signalisieren.
Dark_eye
1
Es ist keine Lösung. Der Grund ist, dass Aals Richtlinie behandelt wird.
Eduard Gamonal
34

Ab Angular v1.3.0 gibt es eine neue rewriteLinksKonfigurationsoption für den Standortanbieter. Dies schaltet das "Hijacking" aller Links auf der Seite aus:

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

Obwohl das Deaktivieren dieses Verhaltens für alle Links möglicherweise nicht Ihre Absicht ist, veröffentliche ich dies für andere, die wie ich $locationim HTML5-Modus nur die URL ändern möchten, ohne alle Links zu beeinflussen.

Mouagip
quelle
6

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

PDF umgeht also den HTML5-Modus und den routeProvider, und der Browser wechselt einfach zu dieser URL.

mfrancis107
quelle
3

Andere Lösung. Alle Links funktionieren normal (Seite neu laden). Mit gekennzeichnete Links ng-href="https://stackoverflow.com/path"werden auf pushState abgespielt. Kleine JS-Hack helfen 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);
}])
msa.im
quelle
1
+1. Die Antwort von Eduard Gamonal ist die vollständigste, aber dies scheint definitiv eine große Variation in der Verwendung des Ziel-Tags zu sein und ist besonders relevant für die Situation, in der sich mein Team befindet, in der wir planen, einen gemeinsamen Header zu ziehen, der von einem anderen Team verwaltet wird.
Derek Greer
3
Da dies eine .config ist, würde dies nicht nur einmal ausgeführt werden? Das heißt, wenn Sie mehrere virtuelle Seiten mit Inhalt haben, werden anscheinend nur die Einträge gescannt, die sich derzeit im DOM befinden, nicht die Einträge, die später als Teil eines URL-Pfads abgerufen werden könnten.
Ryanm