Ich habe einen frustrierenden Morgen.
Ich habe eine App, die einen Basisstandort hat, also ist <base href="/my/path/fruits/index.html" /> im Kopf. Ich versuche, Paging über eine Funktion nextPage() einzurichten. Wenn ich den Link trete, der nextPage() auslöst, verwende ich $location.path('/page/:page') .
Erwartetes Verhalten: Die Browser-URL sollte in http://localhost/my/path/fruits/page/2 geändert werden.
Tatsächliches Verhalten: Die Browser-URL ändert sich (sehr kurz) in http://localhost/my/path/fruits/page/2 und kehrt dann zu http://localhost/my/path/fruits/ zurück.
Hinweis : Dieses Verhalten scheint nicht zu passieren, wenn ich keinen Basisspeicherort verwende. Allerdings muss ich den Basisstandort verwenden, da sich die App in einem Unter / Unter / Unterverzeichnis des Servers befindet.
Auch : Dieses Verhalten tritt nicht auf, wenn ich $locationProvider.html5Mode(false) festlege.
Mache ich etwas falsch? Ist das ein Bug in Angular? Jede Hilfe wird sehr geschätzt.
Hier sind die passenden Dateien.
index.html:
%Vor%script.js:
%Vor%fruits.html (die Ansicht)
%Vor%Ich hatte das gleiche Problem und konnte nicht für das Leben von mir herausfinden, was schief gelaufen ist. Was für mich funktionierte, war das Ändern des Anchor-Tags, an dem das ng-click-Ereignis an ein Button-Tag angehängt war. Von dem, was ich sammeln kann, ändert Angular das Verhalten von Anchor-Tags, wenn kein href-Attribut vorhanden ist, um die Standardaktion zu verhindern. Dies könnte sich störend auswirken, wenn Sie den Speicherort in einem ng-click-Ereignishandler manuell aktualisieren. Das ist nur meine Vermutung, also hoffentlich kann jemand besser erklären.
Der Rollback Ihres Browsers geschieht, weil die URL-Änderung zweimal stattfindet, wenn die ng-click-Funktion ausgelöst wird, und wenn das Standardverhalten des Browsers für ein a-Tag eintritt.
Das ist der Grund, warum Sie das Update in der URL / Ansicht sehen und es dann in den ursprünglichen Zustand zurückkehrt.
Das passiert so, weil der Browser es so versteht.
Schaltflächenlösung Wie bereits erwähnt, können Sie den ng-Klick auf eine Schaltfläche auslösen, da die Schaltfläche kein sinnvolles href-Attribut besitzt, das die URL aktualisiert. Sie können der Schaltfläche eine href hinzufügen, aber es wird nichts tun.
ein Tag: Anstatt die Aktualisierung in ng-click zu tun, vermeide es, eine Funktion zu verwenden, und mache die href die Logik zum Ändern der URL. Es ist eine sauberere Lösung, weil Sie den Browser das Standardverhalten des Tags ausführen lassen, das die URL aktualisiert.
Der Vorteil, den ich daraus ziehen kann, ist, dass jeder den URL shceme auf einen Blick verstehen kann, so dass der Code leichter zu pflegen ist.
%Vor%Ein Tag mit ng-klick: Wenn Sie die Änderung unbedingt programmgesteuert durchführen müssen, sollten Sie das Standardverhalten des Tags vermeiden.
In jQuery würden Sie an das click -Ereignis binden und das event.preventDefault () ausführen und dann Ihre benutzerdefinierte Logik ausführen.
Der AngularJS-Weg ist ein wenig anders wegen der logischen Trennung, die das Framework erzwingt, also besteht die Lösung darin, eine Direktive zu erstellen, die den preventDefault ausführt.
IgnoreClick directory.js
%Vor%Anwendungsbeispiel
%Vor%Vielleicht ist das keine direkte Antwort auf Ihre Frage, warum es so funktioniert oder ist das ein Fehler, da ich es nicht einfach reproduzieren kann (ich meine den Basispfad), aber ich werde versuchen, Ihnen eine Lösung vorzuschlagen .
Sie sollten versuchen, URL-Parameter wie? page = 4 anstelle von URL-Änderung zu verwenden, um anzugeben, welche Seite zusammen mit reloadOnSearch: false -Parameter angezeigt werden soll, wie folgt:
%Vor%Ich denke, es ist genug, um nur eine Route in Ihrem Fall zu haben. Jetzt müssen wir die Paging-Logik ändern, um die Suchfunktion von $ location (anstelle von $ location.path) zu verwenden:
%Vor%Auf diese Weise werden Ihre Seiten aktualisiert, ohne dass bei jedem Seitenwechsel ein neuer Controller erstellt wird. Außerdem vereinfacht es die Routing-Logik. Hoffe das hilft!
HINWEIS: Ich musste $ locationProvider.html5Mode (true) .hashPrefix ('!'); entfernen, da es die Site beim lokalen Ausführen unterbricht.
Tags und Links angularjs routing pagination