Ho un progetto Sto usando angularJS con ui.router e abbiamo una lista di eventi che possono essere veramente lunghi (ha scroll infiniti) se un utente clic su un evento per visualizzare i dettagli viene visualizzato un pulsante indietro, tuttavia, facendo nuovamente clic sul rotolo dei ripristini div in cima! Alla ricerca di qualche suggerimento se c'è qualcosa di costruito in cui potrei fare leva per ricordare questa posizione di scorrimento, so che c'è il servizio di ancoraggio, ma mi chiedo se non ci sia qualcosa di più adatto a fermare l'angolazione dal resettare le posizioni di scorrimento sulla navigazione ?? poiché ci sono alcuni elenchi simili a questo che hanno bisogno di ricordare il loro stato quando si scorre. Ho esaminato e provato a implementare ui-router-extras dsr e sticky ma nessuno dei due sta funzionando ..
esempio http://codedef.com/hapzis_poc/. non è una prova completa, ma dovrebbe essere in grado di scorrere verso il basso gli eventi, fare clic su e indietro e rimanere nella stessa posizione di scorrimento.Come "ricordare" la posizione di scorrimento in angularJS w/Ui.ROUTER
risposta
Affinché gli stati appiccicosi funzionino, è necessario che non distruggano l'elemento DOM. Osservando la struttura dello stato, si utilizza la vista ui con nome body
per lo stato home
, secondo la documentazione di ui-router-extras. Tuttavia, in seguito si verifica un clobber di tale elemento di visualizzazione ui durante la transizione allo stato about
, che utilizza anche la vista ui body
. Questo può essere osservato ispezionando il DOM.
.state('home', {
url: "",
deepStateRedirect: true,
sticky: true,
views: {
"body": {
templateUrl: 'templates/home.html'
},
"[email protected]": {
sticky: true,
templateUrl: "templates/eventList.html",
controller: "eventListCtrl"
}
}
})
.state('about', {
url: 'about',
views: {
"body": { // BAD, you just clobbered the sticky ui-view with this template
templateUrl: 'templates/about.html'
}
}
});
Assicurarsi ui vista dello stato appiccicoso non viene riutilizzato. Per il tuo esempio, inserisci lo stato about
nella visualizzazione senza nome.
.state('about', {
url: 'about',
templateUrl: 'templates/about.html'
});
index.html:
<div ui-view="body" ng-show="$state.includes('home')"></div>
<div ui-view></div>
js:
app.run(function($rootScope, $state) { $rootScope.$state = $state });
C'è una conversazione sul soggetti simili (ng-view
) e la risposta data dal @ BR2000 ha lavorato per me.
https://stackoverflow.com/a/25073496/3959662
per fare il suo lavoro di direttiva per ui-router
effettuare le seguenti operazioni:
1. Creare nuova direttiva in questo modo:
(function() {
'use strict';
angular
.module('your.module.directives')
.directive('keepScrollPos', keepScrollPos);
function keepScrollPos($route, $window, $timeout, $location, $anchorScroll, $state) {
// cache scroll position of each route's templateUrl
var scrollPosCache = {};
// compile function
var directive = function (scope, element, attrs) {
scope.$on('$stateChangeStart', function() {
// store scroll position for the current view
if($state.$current)
{
scrollPosCache[$state.current.templateUrl] = [$window.pageXOffset, $window.pageYOffset];
}
});
scope.$on('$stateChangeSuccess', function() {
// if hash is specified explicitly, it trumps previously stored scroll position
if ($location.hash()) {
$anchorScroll();
// else get previous scroll position; if none, scroll to the top of the page
} else {
var prevScrollPos = scrollPosCache[$state.current.templateUrl] || [0, 0];
$timeout(function() {
$window.scrollTo(prevScrollPos[0], prevScrollPos[1]);
}, 0);
}
});
};
return directive;
}
})();
2. usarlo su l'elemento avere l'attributo ui-view
, nel mio caso:
<div class="col-xs-12" ui-view keep-scroll-pos></div>
- 1. come ricordare la posizione di scorrimento della pagina
- 2. CListCtrl: come mantenere la posizione di scorrimento?
- 3. Imposta posizione di scorrimento
- 4. Chrome ricorda la posizione di scorrimento
- 5. Angularjs ottenere la posizione elemento
- 6. Come mantenere la posizione di scorrimento usando la Pagina Master?
- 7. ListView ottiene la posizione di scorrimento?
- 8. Come si sincronizza la posizione di scorrimento di due div?
- 9. Come posso controllare la velocità di scorrimento di recyclerView.smoothScrollToPosition (posizione)
- 10. Come salvare la posizione di scorrimento di ListView
- 11. Come posso impostare la posizione di scorrimento di un UIScrollView?
- 12. Come gestire la posizione di scorrimento su hashchange nell'applicazione Backbone.js?
- 13. Come posso monitorare la posizione di scorrimento durante lo scorrimento in Safari su iOS?
- 14. Come ottenere la posizione della barra di scorrimento con Javascript?
- 15. Selenio, come si controlla la posizione di scorrimento
- 16. come impostare la posizione di scorrimento su uiwebview
- 17. scorrere la pagina quindi in posizione certian elemento di scorrimento
- 18. Mantenere la posizione di scorrimento quando si antepone il contenuto a un elenco (AngularJS)
- 19. Posizione fissa - Scorrimento orizzontale
- 20. come mantenere la posizione di scorrimento di ng-repeat in AngularJS quando si rimuove un elemento dalla cima
- 21. Modifica posizione barra di scorrimento
- 22. posizione assoluta + Scorrimento
- 23. AngularJS ngInclude dinamicamente cambia la sua posizione
- 24. Ottieni scorrimento Percentuale posizione
- 25. Preservare la posizione del cursore con angularjs
- 26. C#: sincronizza la posizione di scorrimento di due RichTextBox?
- 27. Aggiorna la posizione di scorrimento di UITextView su iPhone
- 28. recyclerview vista interna scorrimento influisce posizione di scorrimento
- 29. trovare la posizione di scorrimento massima di una pagina
$ timeout (function() {$ window.scrollTo (prevScrollPos [0], prevScrollPos [1]); }, 1000); => aspetta 1 secondo per la pagina da renderizzare ... –