如何使用 angularjs ui bootstrap 分页重新加载后停留在当前页面？

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。

编辑： Cookie 方法

所以我尝试将 currentPage 保存在这样的 cookie 中：

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

    getData($scope.currentPage);

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

当页面重新加载时，它从 cookie 中获取保存的页面进入 getData()，$scope.currentPage 设置为正确的页码。但随后它进入 pageChanged()，$scope.currentPage 重置回 1。所以问题依旧。

编辑 2：

即使 $scope.currentPage 在重新加载页面时被硬编码为 2 $scope.currentPage 在 $scope.pageChanged 中重置为 1。

    $scope.currentPage = 2;

    getData($scope.currentPage);

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

最终编辑：

找到了留在当前页面的方法。答案如下。

Answer 1

当您重新加载站点时，angular 也会重新加载并丢失您的 scope/context。我认为您必须为您的当前页面设置一个 cookie，并在每次应用程序加载时检查一个。请参阅：https://docs.angularjs.org/api/ngCookies/service/$cookies

Answer 2

如果使用 $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 3

找到一种在页面重新加载后留在当前页面的方法：

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

这是我的前端-controller.js了解详情；

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

如何使用 angularjs ui bootstrap 分页重新加载后停留在当前页面？

How to stay on current page after reloading using angularjs ui bootstrap pagination?

angularjs

angular-ui-bootstrap