In meiner AngularJS-App habe ich eine About-Seite mit mehreren Unterabschnitten. Alle diese Unterabschnitte befinden sich auf derselben Seite und Teil derselben Vorlage. Ich möchte jedoch über die eigene URL auf jeden Abschnitt zugreifen, der bei Übereinstimmung mit dem richtigen Abschnitt herunterscrollt.
Ich habe die Zustände so eingerichtet:
%Vor%Und auf der About-Seite habe ich ein Menü wie:
%Vor%Dieses Menü ist unten festgelegt und wenn der Benutzer auf den Link klickt oder wenn er die URL direkt über die Adressleiste aufruft, sollte er zu diesem Abschnitt blättern (die URL muss dort aktualisiert werden, wo sie übereinstimmen muss).
Ich bin mir jedoch nicht sicher, wie ich das machen soll (via Angular). Zusammenfassend:
Der HTML-Code für die Seite sieht folgendermaßen aus: Ссылка
Sie können die App hier sehen: Ссылка
Für ein Beispiel von etwas ähnlichem ( Ссылка ), wie Sie sehen können, scrollt es nach unten zu dem richtigen Abschnitt auf der Grundlage der URL NACH dem Laden der Seite ... und verwendet keinen Hash, sondern die tatsächliche URL.
Der UI-Router stellt keine Einschränkungen für die Signatur Ihres Statusobjekts, sodass Sie einfach eine Eigenschaft hinzufügen können:
%Vor%Dann kann Ihr Controller auf diese Daten zugreifen, wenn Sie den Dienst $ state einspeisen.
%Vor% unter der Annahme, dass Sie die id="divAboutOffice" in Ihren HTML-Code eingefügt haben. (und angenommen, dass meine jQuery-Referenz korrekt war; ich benutze keine jquery, also bin ich mir nicht sicher.)
Abhängig von Ihren Anforderungen würden Sie dieses animate() in ein $on() für eines der Ereignisse einbinden: $locationChangeSuccess) , $routeChangeSuccess oder $stateChangeSuccess
auch: Sie müssen nicht die "id" verwenden, wie ich habe - Sie könnten die vorhandene ui-sref nutzen, wenn Sie wirklich nach Elementen nach Attribut suchen möchten. In Ihrem Beispiel scheint dies mit $state.current.name
Ich würde eine scrollTo-Direktive mit window.scrollTo oder einem jquery scrollTo-Plugin erstellen.
Beispiel: Angular-Anweisung, um zu einem bestimmten Element zu blättern Verwenden von window.scrollTo
Jquery scrollTo Plugins:
Beim Laden der Seite scrollen Sie zu der Ansicht, die durch den Hashtag oder einen anderen URL-Parameter definiert wird. Beispiel: www.sample.com # aboutUs Oder www.samplecom? view = aboutUs
beim Scrollen sollte ich:
%Vor%(nachdem ich diese Header zu einer Direktive gemacht habe. (Ich sollte Header zu einer Direktive machen, überprüfe, wie das Inhaltsverzeichnis von ngtutorial.com/learn/scope generiert wird)
%Vor%beim Laden (ich bevorzuge Hashtags, da ich einfach $ anchorScroll () verwenden oder .when () verwenden kann), Beispiele für die Aktualisierung beim Laden sind:
%Vor%Wenn Sie Hashtags nicht mögen, können Sie location.url ()
parsenIch benutze Ссылка in meiner eigenen Anwendung, um Scroll-Kontrolle (und scrolle Spion-Zeug) zu machen, anstatt locationHash zu benutzen. Ich habe diese Lösung nicht selbst ausprobiert, aber ich denke, es wird funktionieren.
Du solltest eine Art Item-ID für wichtige divs deklarieren (um der Ort zu sein, an den du scrollst).
Dann können Sie einen Zustand "about.stately" mit einer URL / about /: locale deklarieren (in ui-router stateParams müssen keine Ganzzahlen sein). Dann in der Steuerung für ungefähr. Können Sie tun (aus der eckigen Scroll-Readme):
%Vor%Wählen Sie anhand des $ stateParams.locale in Ihrem Controller aus, zu welchem Element Sie scrollen möchten. Seien Sie vorsichtig, bis nach all Ihren Kinddirektiven und Stuff Loads - Sie müssen möglicherweise $ evalAsync um es richtig funktionieren zu lassen. Aber das ist der Kern davon, denke ich.
Das habe ich im Moment versucht:
%Vor%Wie Sie sehen können, höre ich den stateChangeSuccess anstelle von Klicks! Auf diese Weise hake ich in jeden Zustand Änderungen unabhängig davon, ob sie von Links oder Browser-Verlauf Tasten aufgerufen wurden und führen Sie den Bildlauf wie nötig.
Ich blende Scrollspy aus, sobald eine Startänderung beginnt, so dass die Scrolling-Animation keine andere Statusänderung aufruft (da es möglich ist, dass Sie durch andere Sektionen scrollen, die gefälschte History-Einträge erzeugen). Und dann schalten Sie es wieder ein, wenn die Animation abgeschlossen ist, damit ich wieder auf Scroll-Ereignisse warten kann.
stateChangeSuccess wird beim Laden der Seite ausgelöst, so dass jedes Einfügen von URLs behandelt wird.
Ich habe eine Variable mit dem Namen scrolled , so dass ich verfolgen kann, ob eine Statusänderung durch das Scrollen des Benutzers verursacht wurde oder nicht. Dies liegt daran, dass ich den scrollTop nicht animieren muss, während der Benutzer durch die Bildlaufleiste geblättert hat.
Gedanken?
Was Sie tun müssen, ist eine Anweisung oben auf der Seite neben dem UI-Router zu erstellen, der den Status überwacht und dann entsprechend dem richtigen Anker scrollt. Es besteht keine Notwendigkeit, templateUrls zu verwenden, da das, was Sie zu erreichen versuchen, eine Art Glättung ist.
Tags und Links javascript angularjs angular-ui-router