假装我的应用是新闻阅读器。它刷新每隔X秒获取一次新闻。
您已在页面中间滚动。然后，ng-view自动刷新。
如果我什么也没做，你就会失去你的位置，因为卷轴被踢回到页面顶部。
因此，在刷新之前，我使用服务来记录滚动的数字位置。我刷新。我将滚动重置为旧值。你应该在你的旧滚动位置。不行。
实际发生的是，当我逐步执行代码时，在重新加载期间，ng-div呈现两次。
在屏幕和DOM中，我可以看到＆＃34; old＆＃34; ng-view内容丰富。
我同时也可以看到一个新的＆＃34; ng-view，同名，同样的一切，生活在dom中作为＆＃34; old＆＃34;的兄弟姐妹。 NG-视图。
我很震惊，因为我没想到这个周期。
新的ng-view完全没有内容。
我成功提取了滚动位置。我尝试在新div上设置滚动位置，但是当angular使其超出我的控制范围时，新div将被渲染并填充内容 - 并且滚动设置为顶部。我的旧设置被忽略/销毁。
我已经尝试过一段令人尴尬的时间来找到解决＆＃34; new＆＃34;的滚动位置的方法。在每次刷新之后，每次尘埃落定后，只有ng-view，但是......
任何提示，提示，技巧，谣言，非常感谢。感谢。
以下是代码的相关摘要：
观点:( ng-view是班级＆＃39; hog＆＃39;）
<!-- 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>
控制器：
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();
}
);
服务：
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();
}
});