Возвращаясь к соответствующей странице при использовании AngularJS UI Bootstrap pagination

Question

Я пытаюсь понять, как вернуться к правильной странице разбитого списка элементов, используя разбиение на страницы URL-адреса AngularJS UI Bootstrap.

У меня есть мои позиции, правильно разбитые на страницы (12 на страницу), и работает фильтр разбивки на страницы (стр. 1 = 1-12, стр. 2 = 13-24 и т. Д.). Я также создал маршрут к шаблону данных для каждого элемента, и это также работает.

На странице сведений у меня есть кнопка, которая возвращается к шаблону в корне приложения ("/") с именем «Возврат в каталог», который является страницей 1 списка элементов. Однако эта кнопка вернется на страницу 1 даже для деталей элемента 24. Что мне нужно сделать, это перейти на страницу 2, где элемент 24 разбит на страницы, а на стр. 3, если указанные детали указаны для любого элемента между 25 -36 и т. Д.

Просьба сообщить, как это сделать.

Answer 1

Вы можете использовать Pagination service для этого случая.

Например:

app.service('PaginationService', function(){ 
    var service = {}; 
    service.currentPageNumber = 1; 

    service.setNewPageNumber = function(newPageNumber) { 
     service.currentPageNumber = newPageNumber; 
    }; 

    return service; 
}); 

app.controller('CatalogController', function($scope, PaginationService){ 
    $scope.currentPage = PaginationService.currentPageNumber; 
    $scope.totalItems = 0; 
    $scope.itemsPerPage = 10; 

    $scope.setPage = function (pageNo) { 
     $scope.currentPage = pageNo; 
    }; 

    $scope.$watch('currentPage', function() { 
     PaginationService.setNewPageNumber($scope.currentPage); 
    }); 
}); 

Каждый раз, когда вы меняете номер текущей страницы, PaginationService.setNewPageNumber() будет называться и после возвращения из деталей страницы, контроллера будет перезагружен и вы будете иметь фактический номер страницы от службы ,

$scope.currentPage = PaginationService.currentPageNumber; 

Надеюсь, это поможет!

Answer 2

При переходе с одной страницы на другую вам необходимо сохранить текущий номер страницы. При нажатии кнопки «Назад» при переходе на текущую страницу установите ng-модель предыдущего значения.

Сохранение текущего номера страницы на странице маршрута: вызовите функцию в нг-изменения

$scope.pageChanged = function(pageNo) { 
 
    $rootScope.SavedCurrentPage = pageNo; 
 
};

Установите ранее сохраненный PageNumber: Важно помнить, чтобы установить номер страницы после элементы извлекаются вызовом службы. Если нет, то номер страницы будет по умолчанию 1

.....getData().then(function(result) { 
 
    if ($rootScope.SavedCurrentPage) { 
 
    $scope.bigCurrentPage = $rootScope.SavedCurrentPage; 
 
    } else { 
 
    $scope.bigCurrentPage = 1; 
 
    } 
 
});

Answer 3

mean.js версия

------------ yo meanjs:angular-service <service-name>------------ 
    (function() { 
    'use strict'; 

    angular 
    .module('lista') 
    .factory('listaService', listaService); 

    listaService.$inject = [/*Example: '$state', '$window' */]; 

    function listaService(/*Example: $state, $window */) { 
    // Pagin service logic 
    // ... 
    var service = {}; 
     service.currentPageNumber = 1; 
     service.setNewPageNumber = function(newPageNumber) { 
     if(newPageNumber>1){ 
     service.currentPageNumber = newPageNumber; 
     } 
    }; 

    // Public API 
    return service; 
    } 
})(); 
------------------------controller------------------------------- 
function buildPager() { 
     vm.pagedItems = []; 
     vm.itemsPerPage = 10; 


     vm.currentPage = listaService.currentPageNumber; 
     $scope.$watch('vm.currentPage',function(o,n){ 
      console.log('current page changed to'); 
      console.log(o); 
     listaService.setNewPageNumber(o); 
     }); 

      vm.figureOutItemsToDisplay(); 
    } 

Answer 4

Я считаю, что лучший способ сохранить состояние постраничной это с помощью параметров в URL. Это также полезно для случая, когда вы хотите поделиться URL-адресом с номером страницы. В противном случае, без параметра страницы в URL-адресе, другой пользователь всегда будет находиться на первой странице.

Вот очень полное сообщение об этом:

http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/

Так, важные вещи:

• Настройка состояния в маршрутизаторе, чтобы получить параметр страница

$stateProvider.state('list', { 
    url: '/list?page', 
    controller: 'ListCtrl', 
    controllerAs: 'list', 
    templateUrl: 'list.html', 
    params: { 
    page: { 
     value: '1', 
     squash: true 
    } 
    } 
}); 

• Ручка страницы параметра, когда контроллер инициализация и обновление состояния при каждом изменении страницы:

angular 
    .module('your.module') 
    .controller('ListCtrl', function ($state, $stateParams) { 
    var vm = this; 
    vm.page = parseInt($stateParams.page || '1'); // page param is a String 
    loadStuffForList(); //First time load elements for list 

    vm.onPageChange = function() { 
     $state.go('.', {'page': '' + vm.page}, {'notify': false}); // notify: false -> prevent the controller from reloading 
     loadStuffForList(); 
    }; 
    function loadStuffForList() {...}; 
    }); 

• Что касается вашего Назад кнопки , если вы не хотите, чтобы пользователь использовать Назад кнопку браузера, я хотел бы сделать что-то вроде этого:

<a ui-sref="list({page: vm.thisItemPage})">Back</a>