2014-12-03 15 views
6

Ecco un esempio di layout. Supponendo che l'altezza della sezione sia uguale o uguale a quella dell'utente.Cambio di interfaccia router angolare con scorrimento

+----------+ 
| Section1 | 
+----------+ 
| Section2 | 
+----------+ 
| Section3 | 
+----------+ 

Tutte queste sezioni sono posizionate in un'unica vista. E voglio cambiare l'url del browser in modo dinamico sulla pagina di scroll dell'utente e raggiungere una delle sezioni: Al primo momento l'utente vede http://example.com/#/section1 (angolare che non usa la modalità html5), quindi scorre una pagina e dovrebbe vedere http://example.com/#/section2 quando l'elemento section2 diventa visibile nella finestra dell'utente . Inoltre, se l'utente copia il collegamento, quando apre, ovvero http://example.com/#/section2, ho bisogno di scorrere la pagina verso quella sezione.

Per rilevare quale sezione è attualmente visualizzata dall'utente, utilizzo la direttiva angular-inview.

Ora l'ho fatto tramite il parametro:

$state.go($state.current, { 
    section: $scope.activeSectionId // e.g. 'section2' 
}, { 
    notify: false, // do not reload page 
    location: 'replace' // do not save as new history entry 
}); 

Ma in questo modo non è buona e tranquilla url non sono alla ricerca amichevole. Inoltre ha un bug, quando clicco su un collegamento con ui-sref, per la prima volta salta la pagina, cambia la sezione inview per un po 'di tempo e innesca il codice menzionato sopra, quindi in realtà non naviga secondo ui-sref. Ma la prossima volta che clicco - tutto funziona bene (questo accade subito dopo il ricaricamento della pagina).

Qualcuno può suggerire come fare meglio, se possibile?

risposta

2

Perché si desidera modificare lo stato, quando si $ state.go ($ state.current)? Forse usare anchorScroll invece, non sono sicuro di html5.

https://docs.angularjs.org/api/ng/service/$anchorScroll

EDIT:

dispiace, ho perso circa di scorrimento del mouse. Controlla questa risposta https://stackoverflow.com/a/14717011/1603188 e l'uso di $ location.hash (id);

+1

L'uso dello scroll di ancoraggio non risolverà il problema di cambiare lo stato dello scrolling naturale con la rotellina del mouse, la tastiera, ecc. Cambierà lo stato solo quando si fa clic su qualche collegamento o pulsante. – m03geek

+0

Sì, l'hash della posizione potrebbe fare il trucco, ma produce un altro # in url e se passo a html5mode (hash) rimarrà anch'esso in url. Il mio obiettivo principale è quello di ottenere il cambio di stato e di eliminare definitivamente l'hash nell'URL. Ma come capisco per ora è impossibile farlo in modo chiaro, quindi se non ci sono nuove risposte, accetterò il tuo, perché almeno parzialmente risolve questo problema. Grazie. – m03geek

Problemi correlati