anglejsを使ってリロードした後に現在のページに留まるにはどうすればよいですか？

Question

以下は、angularjs-ui-bootstrapを使用した単純なページネーションのコードです。私はあまりにも大量のデータセットを使ってクライアント側にページを作っているので、ページが変更されたときにページごとのデータを取得するだけです。

私が問題になっているのは、ページがリロードされたときです。ページングは​​常に最初のページにリセットされます。ページがリロードされたときに、どうすれば現在のページに残りますか？

HTML

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination> 

javascriptの

$scope.currentPage = $location.search().page; 

    getData($scope.currentPage); 

    $scope.pageChanged = function() { 
     getData($scope.currentPage); 
     $location.url('?page=' + $scope.currentPage); 
    }; 

    function getData(pageNumber) {   
     if (pageNumber == null) 
      pageNumber = 1; 
     $http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber) 
     .success(function (data) { 
       $scope.teams = data.Teams; 
       $scope.totalCount = data.TotalCount; 
      }).error(function() { 
      alert("error"); 
     }); 

は、このコードは、現在のURLに?page={currentPage}パラメータを追加します。ページがリロードされると、保存されたページが$location.search().pageからgetData()に、$scope.currentPageが正しいページ番号に設定されます。しかしそれはpageChanged()になり、$scope.currentPageは1にリセットされます。 EDIT

：クッキーアプローチ

だから私はこのようなクッキーにcurrentPageにを保存しようとしました：

$scope.currentPage = $cookies.get('page'); 

    getData($scope.currentPage); 

    $scope.pageChanged = function() { 
     getData($scope.currentPage); 
     $cookies.put('page', $scope.currentPage); 
    };  

ページでは、それはクッキーから保存されたページがでgetData()になりますリロードする

$scope.currentPageが正しいページ番号に設定されています。しかしそれは pageChanged()になり、 $scope.currentPageは 1にリセットされます。だから問題はまだ起こる。

EDIT 2：ページが$scope.currentPageが$scope.pageChangedに1にリセットされリロードされたとき$scope.currentPageハード2に符号化されていても

。

$scope.currentPage = 2; 

    getData($scope.currentPage); 

    $scope.pageChanged = function() { 
     getData($scope.currentPage);    
    };  

FINAL EDIT：

は、現在のページに滞在する方法を見つけました。答えは以下の通りです。

Answer 1

：

HTML

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination> 

JavaScriptを

$scope.savedCurrentPage = $location.search().page;   
    $scope.currentPage = $scope.savedCurrentPage; 

    if ($scope.currentPage == 1) { 
     getData($scope.currentPage); 
     $scope.savedCurrentPage = null; 
    } 

    $scope.pageChanged = function() { 
     //Since $scope.currentPage gets reset to 1 here, check if there is a savedCurrentPage. 
     if ($scope.savedCurrentPage != null) { 
      $scope.currentPage = $scope.savedCurrentPage; 
      //Set it to null so it only happens when the page first loads. 
      $scope.savedCurrentPage = null; 
     } 

     getData($scope.currentPage); 
     $location.url('?page=' + $scope.currentPage);     
    }; 

    function getData(pageNumber) {   
     if (pageNumber == null) 
      pageNumber = 1; 
     $http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber) 
     .success(function (data) { 
      $scope.teams = data.Teams; 
      $scope.totalCount = data.TotalCount; 
     }) 
     .error(function() { 
      alert("error"); 
     }); 
    } 

Answer 2

サイトをリロードすると、角度も再読み込みされ、スコープ/コンテキストが緩和されます。私は、あなたが現在のページを持つクッキーを設定し、アプリケーションが読み込まれるたびに1つを確認する必要があると思う。参照：https://docs.angularjs.org/api/ngCookies/service/ $ cookies

Answer 3

$ location.searchを使用するとどうなりますか？

$scope.defaultPage = 4; 
    $scope.currentPage = $location.search().page || $scope.defaultPage; 
    $location.url('/').search({page: $scope.currentPage}); 

私はにコードを変更します

ページがリロードされた後、現在のページに滞在する方法を考え出した

$scope.defaultPage = 0; 
$scope.currentPage = $location.search().page || $scope.defaultPage 
$location.url('/').search({page: $scope.currentPage}) 

$scope.pageChanged = function() { 
    getData($scope.currentPage + 1); 
    $location.search({page: $scope.currentPage + 1}); 
}; 

Answer 4

ブラウザーでlocalStorageを使用すると、現在のページを保存し、必要なときにその現在のページを取得できます。

$scope.currentPage = 1; 
localStorage.StoreCurrentPage = $scope.currentPage; 
if(localStorage.StoreCurrentPage){ 
    $scope.currentPage = localStorage.StoreCurrentPage; 
}else{ 
    $scope.currentPage = 1; 
} 

Answer 5

ここでは短いバージョンです。

if(page != null){ 
     sessionStorage.page = page; 
    } 

ここでは詳細については、frontend-controller.jsを参照してください。

https://gist.github.com/umutyerebakmaz/722949980043d26e35d2166857877641