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

Question

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

我的项目已正确分页(12页到一页),分页过滤器工作(第1页= 1-12,第2页= 13-24等).我还为每个项目创建了一个指向详细信息模板的路径,这也是有效的.

在详细信息页面上,我有一个按钮,返回到应用程序根目录下的模板("/"),名为"返回目录",这是项目列表的第1页.但是,即使有关项目24的详细信息,此按钮也会返回到第1页.我希望它执行的操作是转到第2页,其中第24项是分页的,如果显示的详细信息适用于25之间的任何项目,则转到第3页. -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;

希望能帮助到你！