當$ interval調用執行$ route.reload的服務時，ng-view div會呈現兩次

假裝我的應用程序是新聞閱讀器。它刷新每X秒獲取傳入消息。

您已經在頁面的中間向下滾動。然後，ng-view自動刷新。

如果我沒有做任何的滾動踢回升到頁面的頂部，你會失去你的地方。

因此，就在刷新之前，我使用服務來記錄滾動的數字位置。我刷新。我將滾動重置爲舊值。你應該在你的舊滾動位置。不起作用。

實際情況是什麼，因爲我單步執行代碼時，NG-DIV呈現兩次重裝期間。

在屏幕上和DOM中，我可以看到充滿內容的「舊」ng視圖。

我也可以看到，在同一時間，一個「新」的NG-來看，同樣的名字，同樣的一切，生活在DOM「老」 NG-視圖的兄弟姐妹。

我驚呆了，因爲我沒有想到在這個循環中的任何時間。

新的ng-view完全沒有內容。

我成功地提取了滾動位置。我嘗試在新div上設置滾動位置，但是當角度超出了我的控制範圍時，新div將被渲染並填充內容 - 並且滾動設置爲頂部。我的舊設置被忽略/銷燬。

我試過了一個令人尷尬的時間來找到一種方法來解決「新」NG視圖的滾動位置，只有在所有的塵埃已經解決後，每次刷新後，每次...

任何提示，提示，技巧，謠言，不勝感激。謝謝。

下面是代碼的相關片段：

在查看：（NG-視圖是類 '豬'）

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

});

來源

2017-06-11 Sliced Bread

您需要取消$區間上路徑切換

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

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

RTFD here和more

來源

2017-06-12 03:16:25 harishr

當$ interval調用執行$ route.reload的服務時，ng-view div會呈現兩次

回答

相關問題