Weiß jemand von euch, wie man mit Anker-Hash-Verknüpfungen in AngularJS gut umgeht ?
Ich habe das folgende Markup für eine einfache FAQ-Seite
<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>
<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>
Wenn Sie auf einen der oben genannten Links klicken, fängt AngularJS mich ab und leitet mich zu einer völlig anderen Seite weiter (in meinem Fall zu einer 404-Seite, da keine Routen zu den Links passen).
Mein erster Gedanke war, eine Routenübereinstimmung " / faq /: kapitel " zu erstellen und in der entsprechenden Steuerung $routeParams.chapter
nach einem übereinstimmenden Element zu prüfen und dann mit jQuery nach unten zu scrollen.
Aber dann scheißt AngularJS wieder auf mich und scrollt trotzdem einfach zum Anfang der Seite.
Also hat hier jemand in der Vergangenheit etwas Ähnliches getan und kennt eine gute Lösung dafür?
Bearbeiten: Der Wechsel zu html5Mode sollte meine Probleme lösen, aber wir müssen trotzdem IE8 + unterstützen, daher befürchte ich, dass dies keine akzeptierte Lösung ist: /
quelle
ng-href=""
stattdessen zu verwenden .Antworten:
Du suchst
$anchorScroll()
.Hier ist die (beschissene) Dokumentation.
Und hier ist die Quelle.
Grundsätzlich injizieren Sie es einfach und rufen es in Ihrem Controller auf, und es führt Sie zu einem beliebigen Element mit der darin gefundenen ID
$location.hash()
Hier ist ein Plunker zu demonstrieren
BEARBEITEN: um dies beim Routing zu verwenden
Richten Sie Ihr Winkelrouting wie gewohnt ein und fügen Sie dann einfach den folgenden Code hinzu.
und dein Link würde so aussehen:
Hier ist ein Plunker, der das Scrollen mit Routing und $ anchorScroll demonstriert
Und noch einfacher:
und dein Link würde so aussehen:
quelle
<a href="#foo">foo</a>
. Mein Codebeispiel bestand darin, das Scrollen zu einer ID beim Routenwechsel anzuzeigen.$location.search('scrollTo', null)
In meinem Fall habe ich festgestellt, dass die Routing-Logik aktiviert wurde, wenn ich die geändert habe
$location.hash()
. Der folgende Trick hat funktioniert ..quelle
$location.hash(my_id); $anchorScroll; $location.hash(null)
. Es verhindert das Neuladen und ich muss dieold
Variable nicht verwalten .Es ist nicht erforderlich, das Routing oder andere Elemente zu ändern, die nur zum
target="_self"
Erstellen der Links verwendet werden müssenBeispiel:
Und verwenden Sie das
id
Attribut in Ihren HTML- Elementen wie folgt:Es ist nicht erforderlich, ## zu verwenden, wie in den Kommentaren angegeben / erwähnt ;-)
quelle
quelle
Wenn Sie die Route immer kennen, können Sie den Anker einfach wie folgt anhängen:
Wo
route
ist die aktuelle Winkelroute undanchorID
stimmt mit einer<a id="anchorID">
irgendwo auf der Seite übereinquelle
reloadOnSearch: false
in Ihrer Routenkonfiguration für diese Route angeben, löst Angular keine Routenänderung aus und blättert nur zur ID. In Kombination mit der ima
Tag angegebenen vollständigen Route würde ich sagen, dass dies die einfachste und einfachste Lösung ist.$anchorScroll
funktioniert dafür, aber es gibt eine viel bessere Möglichkeit, es in neueren Versionen von Angular zu verwenden.Akzeptiert jetzt
$anchorScroll
den Hash als optionales Argument, sodass Sie ihn überhaupt nicht ändern müssen$location.hash
. ( Dokumentation )Dies ist die beste Lösung, da sie die Route überhaupt nicht beeinflusst. Ich konnte keine der anderen Lösungen zum Laufen bringen, da ich ngRoute verwende und die Route neu geladen wird, sobald ich sie festgelegt habe
$location.hash(id)
, bevor$anchorScroll
sie ihre Magie entfalten kann .So verwenden Sie es ... zuerst in der Direktive oder im Controller:
und dann in der Ansicht:
Wenn Sie eine feste Navigationsleiste (oder eine andere Benutzeroberfläche) berücksichtigen müssen, können Sie den Offset für $ anchorScroll wie folgt festlegen (in der Ausführungsfunktion des Hauptmoduls):
quelle
id
Ansicht in dieser Ansicht zu scrollen.ngRoute
und die neuere Version von Angular.Dies war meine Lösung mit einer Direktive, die eher eckig erscheint, weil wir es mit dem DOM zu tun haben:
Plnkr hier drüben
Github
CODE
HTML
Ich habe den Dienst $ anchorScroll verwendet. Um der mit dem Hash-Wechsel einhergehenden Seitenaktualisierung entgegenzuwirken, habe ich das locationChangeStart-Ereignis abgebrochen. Dies funktionierte für mich, weil ich eine Hilfeseite an einen ng-Schalter angeschlossen hatte und die Aktualisierungen die App im Wesentlichen beschädigen würden.
quelle
Versuchen Sie, ein Hash-Präfix für Winkelrouten festzulegen
$locationProvider.hashPrefix('!')
Vollständiges Beispiel:
quelle
Ich habe dies in der Routenlogik für meine App umgangen.
quelle
Dies ist ein alter Beitrag, aber ich habe lange nach verschiedenen Lösungen gesucht, deshalb wollte ich eine einfachere teilen. Hinzufügen nur
target="_self"
auf die<a>
Tag hat es für mich behoben. Der Link funktioniert und bringt mich zum richtigen Ort auf der Seite.Angular fügt dem # in der URL jedoch immer noch eine gewisse Verrücktheit hinzu, sodass Sie möglicherweise Probleme haben, wenn Sie die Zurück-Schaltfläche für die Navigation und dergleichen verwenden, nachdem Sie diese Methode verwendet haben.
quelle
Dies mag ein neues Attribut für ngView sein, aber ich habe es geschafft, Anker-Hash-Links zu verwenden, um mit
angular-route
demngView autoscroll
Attribut und 'Doppel-Hashes' zu arbeiten.ngView (siehe Autoscroll)
(Der folgende Code wurde mit Winkelriemen verwendet)
quelle
Ich könnte das so machen:
quelle
Hier ist eine Art schmutzige Problemumgehung, indem Sie eine benutzerdefinierte Direktive erstellen, die zu einem bestimmten Element scrollt (mit fest codierter "FAQ").
http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview
quelle
$anchorScroll
, siehe meine Antwort.quelle
Wenn Sie nicht verwenden möchten, finden Sie
ng-click
hier eine alternative Lösung. Es verwendet afilter
, um die richtige URL basierend auf dem aktuellen Status zu generieren. In meinem Beispiel wird ui.router verwendet .Der Vorteil ist, dass der Benutzer sieht, wo der Link schwebt.
Der Filter:
quelle
Meine Lösung mit ng-route war diese einfache Anweisung:
Das HTML sieht aus wie:
quelle
scroll-to="yourid"
und die Direktive benennenscrollTo
(und auf das Attribut zugreifen wieattrs["scrollTo"]
? Außerdem muss der Handler ohne explizite jQuery-Einbeziehung gebunden seinelement.on('click', function (e) {..})
.Sie könnten versuchen, anchorScroll zu verwenden .
Beispiel
Der Controller wäre also:
Und die Aussicht:
... und kein Geheimnis für die Anker-ID:
quelle
Ich habe versucht, meine Angular-App zu einem Anker-Opon-Ladevorgang zu scrollen, und bin auf die URL-Umschreibregeln von $ routeProvider gestoßen.
Nach langen Experimenten habe ich mich dazu entschlossen:
quelle
Ich bin nicht 100% sicher, ob dies die ganze Zeit funktioniert, aber in meiner Anwendung gibt mir dies das erwartete Verhalten.
Nehmen wir an, Sie befinden sich auf der Seite ÜBER und haben die folgende Route:
Nun, in Ihnen HTML
Abschließend
Das Einfügen des Seitennamens vor dem Anker hat den Trick für mich getan. Lass mich deine Gedanken wissen.
Nachteil
Dadurch wird die Seite erneut gerendert und anschließend zum Anker gescrollt.
AKTUALISIEREN
Ein besserer Weg ist, Folgendes hinzuzufügen:
quelle
Holen Sie sich Ihre Bildlauffunktion einfach. Als zusätzliche Funktion wird auch das animierte / reibungslose Scrollen unterstützt . Details zur Angular Scroll- Bibliothek:
Github - https://github.com/oblador/angular-scroll
Laube :
bower install --save angular-scroll
npm :
npm install --save angular-scroll
Minfied Version - nur 9kb
Reibungsloses Scrollen (animiertes Scrollen) - ja
Scroll Spy - ja
Dokumentation - ausgezeichnet
Demo - http://oblador.github.io/angular-scroll/
Hoffe das hilft.
quelle
Basierend auf @Stoyan habe ich die folgende Lösung gefunden:
quelle
Beim Ändern der Route wird zum oberen Rand der Seite gescrollt.
Setzen Sie diesen Code auf Ihren Controller.
quelle
In meinen Gedanken hatte @slugslog es, aber ich würde eines ändern. Ich würde stattdessen Ersetzen verwenden, damit Sie es nicht zurücksetzen müssen.
Docs Suche nach "Methode ersetzen"
quelle
Keine der oben genannten Lösungen funktioniert für mich, aber ich habe es gerade versucht, und es hat funktioniert.
Daher wurde mir klar, dass ich die Seite benachrichtigen muss, um mit der Indexseite zu beginnen und dann den herkömmlichen Anker zu verwenden.
quelle
Manchmal in der AngularJS-Anwendung funktioniert die Hash-Navigation nicht und Bootstrap-JQuery-Javascript-Bibliotheken verwenden diese Art der Navigation in großem Umfang, damit sie
target="_self"
zum Ankertag hinzugefügt werden kann . z.B<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">
quelle
Siehe https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider
Das Setzen auf false hat den Trick ohne all das für mich getan.
quelle
Ich verwende AngularJS 1.3.15 und muss anscheinend nichts Besonderes tun.
https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider
Also funktioniert folgendes für mich in meinem HTML:
Ich musste überhaupt keine Änderungen an meinem Controller oder JavaScript vornehmen.
quelle