AngularJS中dir-pagination如何跳转至指定分页页面？

核心思路 #

因为列表页和详情页是独立页面，没法直接共享分页控件实例，所以得靠URL传参把当前页码带到详情页，返回时再带回列表页，最后列表页加载时读取参数跳转到对应页码。

具体步骤 #

1. 跳转详情页时携带当前页码

在列表页的行点击事件里，先获取当前分页页码（需要注入paginationService），再把页码拼到详情页的URL参数里：

// 列表页控制器
app.controller('ListController', function($scope, $location, paginationService) {
  // 点击行跳转详情页的方法
  $scope.goToDetail = function(record) {
    var currentPage = paginationService.getCurrentPage();
    // 将页码作为URL参数传入详情页
    $location.path('/detail/' + record.id).search('page', currentPage);
  };
});

2. 详情页返回时带回页码

详情页的返回按钮，直接跳回列表页并带上之前的page参数：

<!-- 详情页返回按钮 -->
<button ng-click="goBack()">返回列表</button>

// 详情页控制器
app.controller('DetailController', function($scope, $location) {
  $scope.goBack = function() {
    var page = $location.search().page;
    // 跳回列表页并携带页码参数
    $location.path('/list').search('page', page);
  };
});

3. 列表页加载时跳转指定页

列表页初始化时，读取URL里的page参数，调用分页服务的方法跳转到对应页码。注意要等数据加载完成后再执行跳转，避免数据未就绪导致失效：

// 列表页控制器
app.controller('ListController', function($scope, $location, paginationService, yourDataService) {
  // 加载列表数据
  $scope.loadData = function() {
    yourDataService.getList().then(function(data) {
      $scope.data = data;
      // 数据加载完成后，检查URL中的页码参数
      var targetPage = $location.search().page;
      if (targetPage) {
        // 转成数字类型，因为URL参数是字符串
        paginationService.setCurrentPage(parseInt(targetPage));
      }
    });
  };
  $scope.loadData();
});

补充说明

你的分页HTML代码没问题，但要确保控制器已正确注入paginationService，且itemsPerPage的数值（这里是20）和分页控件的配置保持一致。之前调用setCurrent无效果，大概率是没注入服务，或者跳转时机早于数据加载完成的时间。

内容的提问来源于stack exchange，提问作者fresko