Imaginez que mon application est un lecteur de nouvelles. Il s'actualise pour récupérer les nouvelles toutes les X secondes.
Vous avez fait défiler jusqu'à la moitié de la page. Ensuite, l'actualisation automatique de ng-view se termine.
Si je ne faisais rien, vous perdriez votre place lorsque le parchemin serait retourné en haut de la page. Donc, juste avant la régénération, j'utilise un service pour enregistrer l'emplacement numérique du défilement. Je me rafraîchis. Je réinitialise le défilement à l'ancienne valeur. Vous devriez être à votre ancien emplacement de défilement. Ne fonctionne pas Ce qui se passe en réalité, c'est que lorsque je parcours le code, pendant le rechargement, le ng-div est rendu deux fois.
Sur l'écran et dans le DOM, je peux voir le "vieux" ng-view plein de contenu.
Je peux aussi voir, en même temps, une "nouvelle" ng-view, même nom, même chose, vivant dans le dom comme un frère de l '"ancienne" ng-view.
Je suis stupéfait car je ne m'attendais pas à ça à aucun moment du cycle.
La nouvelle vue ng est complètement dépourvue de contenu.
J'ai réussi à extraire l'emplacement de défilement. Je tente de définir l'emplacement du défilement sur la nouvelle div, mais lorsque angulaire fait son truc au-delà de mon contrôle, le nouveau div est rendu et rempli de contenu - et le défilement est mis en haut. Mon ancien réglage est ignoré/détruit.
J'ai essayé pendant un certain temps de trouver un moyen d'adresser l'emplacement de défilement de la "nouvelle" vue ng seulement, une fois la poussière retombée, chaque fois après chaque rafraîchissement, mais ...
Tous les conseils, astuces, astuces, rumeurs, grandement appréciés. Merci.
Voici les extraits pertinents du code:
VUE: (ng-view est classe 'porc')
<!-- HEADER -->
<img ng-id='colonade' ng-show="showPageHero" class='header jumbo' src="components/jumbotron/x.png" />
<header ng-include="'components/header/header.html'">
</header>
<!-- VIEWPORT - GETS RENDERED TWICE AT ONE POINT -->
<div ng-view class="column col-md-11 center-block hog" id="viewport" >
</div>
<div class="ng-enter" ng-include="'components/footer/footer.html'">
</div>
LE CONTRÔLEUR:
app.controller(
'Controller' ,
function($scope, $location, $rootScope, $interval, $route, pane)
{
console.log("at Controller");
var curscroll;
$rootScope.$on(
"$locationChangeStart" ,
function(event, next, current)
{
console.log("at $locationChangeStart - only the first time");
//*** Take note when the URL changes.
$scope.showPageHero = $location.path() === '/';
console.log("at $locationChangeStart - setting interval");
// Have tried different values for X, from 3,000 to 60,000
$interval(pane.refreshReroll, X);
}
);
$(window).on('beforeunload', function() {
console.log('beforeunload');
});
$rootScope.$on("$routeChangeStart", function($currentRoute, $previousRoute) {
curscroll = pane.scrollLocationGet();
console.log("at $routeChangeStart, curscroll=" +curscroll);
});
$rootScope.$on("$routeChangeSuccess", function($currentRoute, $previousRoute) {
console.log("at $routeChangeSuccess, about to set scroll to " +curscroll);
pane.scrollLocationSet(curscroll);
});
$scope.$on('$viewContentLoaded', function(){
console.log("at $viewContentLoaded, about to set scroll to " +curscroll);
pane.scrollLocationSet(curscroll);
});
$scope.repeat = pane.scrollLocationGet();
}
);
LE SERVICE:
app.service('pane', function($route, $window) {
// comes here once at start
console.log('in service pane');
var _scrollLocation;
return {
scrollLocationGet: scrollLocationGet,
scrollLocationSet: scrollLocationSet,
refreshReroll: refreshReroll
};
function scrollLocationGet(){
return angular.element(document.getElementById('viewport')).scrollTop();
}
function scrollLocationSet(val){
var hogs=angular.element(document.getElementsByClassName('hog'));
if (hogs.length > 1){
// At this point I have TWO ng-views in the DOM
angular.element(document.getElementsByClassName('hog'))[0].scrollTop = 124;
angular.element(document.getElementsByClassName('hog'))[1].scrollTop = 124;
}
}
function refreshReroll() {
console.log('at refreshReroll - about to reload');
$route.reload();
}
});