2013-05-02 4 views
8

ich durch die problematischen Fließ gehen werde ...Wie mische ich Links, die Seitenaktualisierungen auslösen, mit Angulars html5Mode = true, ohne die Zurück-Schaltfläche zu unterbrechen?

  • lade ich google.com (nur als Ausgangspunkt)
  • Ich gehe app.com
  • ich nav app.com/projects
  • I nav app.com/api/test (durch window.location)
  • I Siehe die rohe JSON (gut so weit ...)
  • Ich drücke zurück, url ändert sich zu app.com/projects, aber ich sehe immer noch die JSON.
  • Ich drücke wieder zurück, url ändert sich zu app.com aber ich sehe immer noch die JSON.
  • Ich drücke wieder zurück, google.com lädt.
  • ich nach vorne drücken, app.com Lasten gut ... alles wieder normal

Was seltsam ist, ist ich habe nur beobachtet dies, wenn html5Mode = true in Webkit- firefox wie gewünscht funktioniert ..

. . .

Zuerst mein server.coffee sieht wie folgt aus:

app.get '/partials/:partial', routes.partials 
app.get '/api/test', api.test 
app.get '*', routes.index 

Grundsätzlich können alle Anfragen den Index zu laden (die Schopf aus dem Sumpf Angular), mit Ausnahme für einen Blick/Teil Handler und einer Test api Route das antwortet mit rohem JSON.

. . .

(Ich verwende das ui-router Modul für verschachtelte Ansichten Verwaltung und UI heißt, es nutzt $urlRouterProvider, was zu Angular ist sehr ähnlich ist $routeProvider)

Zweitens meine app.coffee wie folgt aussieht:

Da alles async ist, musste ich verwenden, um auf window.location.href zuzugreifen, um eine Seitenaktualisierung auszulösen, damit der Server die Route behandelt.

Also meine Frage, kann ich Links mischen, die Seitenaktualisierungen mit Angulars html5Mode auslösen, ohne die Zurück-Taste zu brechen? Ist das nur ein Webkit-Bug und/oder gibt es einen besseren Weg, dies zu tun?

Im Idealfall würde ich die Anwendung Angular-laufen lassen, aber Dinge wie die "über" oder "Kontakt" -Seite (die nicht dynamisch oder async sein müssen), würde direkt vom Server mit regulären Seite bedient werden erfrischt ...

Hilfe!

+1

Jetzt, wo ich die Antwort haben, fand ich eine doppelte Frage: http://stackoverflow.com/questions/11580004/angular-js-link-behaviour-disable-deep-linking-for-specific-urls – jlmakes

Antwort

18

zwei Optionen:

  1. Wenn Sie <a />-Tags verwenden, geben Sie target="_self" AngularJS wissen zu lassen, es nicht ihre Klicks (diese Verbindungen durch Browser normalerweise behandelt werden) erfassen soll. Dies ist kein Hack; Das ist normal dokumentiertes Verhalten.
  2. Verwenden Sie wie Sie getan haben. Das ist akzeptabel.
+4

+1 für Option 1, die den Zurück-Button im Webkit mit 'html5Mode = true' fixiert; Das habe ich definitiv in der Dokumentation vermisst, danke Ezekiel! – jlmakes

+0

Victors Lösung funktioniert. Die Einstellung target="_self" erzwingt ein erneutes Laden der Seite als nur das Routing. –

+0

Danke! Du rettest mein Leben auf jeden Fall! –