使用 AngularJS UI Bootstrap 分页时返回正确的页面

Question

我正在尝试了解如何使用 AngularJS UI Bootstrap 的分页返回到分页项目列表的正确页面。

我的项目已正确分页（12 页），并且分页过滤器有效（第 1 页 = 1-12、第 2 页 = 13-24 等）。我还为每个项目创建了一个到详细信息模板的路由，这也很有效。

在详细信息页面上，我有一个按钮可以返回到应用程序根目录（“/”）的模板，名为“返回目录”，这是项目列表的第 1 页。但是，即使项目 24 的详细信息，此按钮也会返回第 1 页。我想做的是转到第 2 页，其中第 24 项是分页的，如果显示的详细信息是针对 25 之间的任何项目，则转到第 3 页-36，以此类推。

请告知如何去做这样的事情。

Answer 1

我相信保持分页状态的最好方法是在 URL 中使用参数。这对于您希望与页码共享 URL 的情况也很有用。否则，如果 URL 中没有 page 参数，其他用户将始终登陆第一页。

这是一篇非常完整的帖子：

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

• 在控制器初始化时处理 page 参数，并在每次页面更改时更新状态：

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 () {...};
  });

• 关于您的 Back 按钮，如果您不希望用户使用浏览器的 Back 按钮，我会这样做：

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

Answer 2

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 3

当您从一个页面路由到另一个页面时，您需要存储当前页码。 当您返回当前页面时单击返回按钮，将 ng-model 设置为上一个值。

在页面路由上存储当前页码：调用ng-change中的函数

$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 4

在这种情况下，您可以使用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;

希望对你有帮助！