Как остаться на текущей странице, после перезагрузки с помощью AngularJS пользовательского интерфейса загрузки страниц?

Question

Как остаться на текущей странице, после перезагрузки с помощью AngularJS пользовательского интерфейса загрузки страниц?

Ниже приведен мой код для простой пагинации с использованием 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");

        });

Этот код в настоящее время добавляет параметр ?page={currentPage} к url. Когда страница перезагружается, она получает сохраненную страницу из $location.search().page переходит в getData() с $scope.currentPage, установленным на правильный номер страницы. Но затем он переходит в pageChanged() с $scope.currentPage сброшенным обратно в 1.

EDIT: подход к файлам Cookie

Поэтому я попытался сохранить текущую страницу в файле 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 сбрасывается в 1 в $scope.pageChanged.

    $scope.currentPage = 2;



    getData($scope.currentPage);



    $scope.pageChanged = function () {

        getData($scope.currentPage);            

    };

ПОСЛЕДНЕЕ РЕДАКТИРОВАНИЕ:

Нашел способ оставаться на текущей странице. Ответ находится ниже.

667 5

angularjs

5 ответов:

Comments

Ничего не найдено.

Bipin Shilpakar · Accepted Answer · 2017-07-27 10:35:05

Вы можете использовать localStorage в браузере, чтобы сохранить текущую страницу и получить ее позже, когда вам это нужно.
$scope.currentPage = 1;
localStorage.StoreCurrentPage = $scope.currentPage; 
if(localStorage.StoreCurrentPage){
    $scope.currentPage = localStorage.StoreCurrentPage;
}else{
    $scope.currentPage = 1;
}

wdanda · Accepted Answer · 2016-05-26 19:30:40

Когда вы перезагрузите свой сайт, angular тоже перезагрузится и потеряет область / контекст. Я думаю, что вам придется установить куки с текущей страницей ur и проверять его каждый раз, когда приложение загружается. Смотрите: https://docs.angularjs.org/api/ngCookies/service/$cookies

Brian · Accepted Answer · 2016-05-26 21:27:04

Что делать, если вы используете $location.искать?

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

dmarsi · Accepted Answer · 2016-05-31 20:13:59

Придумал способ оставаться на текущей странице после перезагрузки страницы:

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

umutyerebakmaz · Accepted Answer · 2017-11-06 17:29:29

Краткая версия здесь;
if(page != null){
        sessionStorage.page = page;
     }
Вот мой frontend-контроллер.js для деталей;
https://gist.github.com/umutyerebakmaz/722949980043d26e35d2166857877641 