使用angularjs ui引导分页重新加载后如何留在当前页面？答案

【问题标题】：How to stay on current page after reloading using angularjs ui bootstrap pagination?使用angularjs ui引导分页重新加载后如何留在当前页面？
【发布时间】：2017-11-06 23:29:29
【问题描述】：

下面是我使用 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);            
    };

最终编辑：

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

【问题讨论】：

refresh 是指重新加载吗？角度模型将在页面重新加载时重新初始化。
@NarainMittal 是的，当页面重新加载时。有没有办法重新加载并停留在当前页面？

标签： angularjs angular-ui-bootstrap

【解决方案1】：

您可以在浏览器中使用 localStorage 来保存当前页面，并在以后需要时获取该当前页面。

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

【讨论】：

【解决方案2】：

当您重新加载您的网站时，Angular 也会重新加载并失去您的范围/上下文。我认为您必须在当前页面上设置一个 cookie，并在每次应用加载时检查一个。请参阅：https://docs.angularjs.org/api/ngCookies/service/$cookies

【讨论】：

我尝试将 currentPage 保存在 cookie 中，但它仍然将 $scope.pageChanged() 中的 currentPage 重置为 1。查看我的编辑。

【解决方案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});
};

【讨论】：

从 url 获取正确保存的 currentPage 没有问题。一旦页面重新加载，它就会进入$scope.pageChanged()，$scope.currentPage 重置为1，无论之前设置什么。
我刚刚更新了我将如何更改代码。在决定 $scope.currentPage 的值时，这应该首先评估 URL。它可以在我的本地系统上运行，但 plunker 对测试很时髦。
我在工作中使用了类似的功能，虽然是使用 ng-route，但概念是一样的。视图数据/配置通过 ID 加载，如果重新加载，您将停留在该视图上。
但是当您更改的页面永远不会保存您所在的新页面到 url 中时。
如果在触发 pageChange 时它总是从 url 抓取页面，它会阻止一起更改页面。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这里是短版；

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

这里是我的 frontend-controller.js 了解详情；

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

【讨论】：