Angularjs 当$interval调用执行$route.reload的服务时，ng view div将呈现两次

假设我的应用程序是新闻阅读器。它每X秒刷新一次以获取传入新闻

您已将页面向下滚动了一半。然后，ng视图将自动刷新

如果我什么也不做，当卷轴被踢回页面顶部时，你将失去你的位置

因此，在刷新之前，我使用一个服务记录滚动条的数字位置。我刷新。我将滚动条重置为旧值。您应该在旧的滚动位置。不起作用

实际发生的情况是，当我逐步浏览代码时，在重新加载过程中，ng div被渲染两次

在屏幕和DOM中，我可以看到充满内容的“旧”ng视图

同时，我还可以看到一个“新”ng视图，相同的名称，相同的所有内容，作为“旧”ng视图的兄弟住在dom中

我感到震惊，因为我没有预料到这在任何时候的周期

新的ng视图完全没有内容

我成功地提取了滚动位置。我试图在新div上设置滚动位置，但当angular执行超出我控制的操作时，新div将被渲染并填充内容，并且滚动设置为顶部。我的旧设置被忽略/破坏

我已经花了很长时间试图找到一种方法来解决“新”ng视图的滚动位置，但每次刷新后，所有尘埃都已尘埃落定，但

任何提示、提示、技巧、谣言，不胜感激。谢谢

以下是相关的代码片段：

视图：（ng视图是类“hog”）

服务：

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();
    }

});

---

您需要取消更改路线时的$interval

      $scope.stopTime = $interval(updateTime, 1000);

      $scope.on('$destroy', function() {
        $interval.cancel($scope.stopTime);
      });

RTFD和

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();
    }

});

      $scope.stopTime = $interval(updateTime, 1000);

      $scope.on('$destroy', function() {
        $interval.cancel($scope.stopTime);
      });