AngularJS POST请求分页点击页码数据不刷新问题求助

看起来你的分页工厂在POST场景下失效，核心是几个代码逻辑和Angular使用规范的问题，我帮你一步步修复：

首先分析问题根源 #

1. 未正确接收action参数：工厂里用了callerAction但从未赋值，导致makePages和$watch里的条件判断永远不生效，search_customers数组无法被正确填充。
2. 变量未声明导致全局污染：$watch里的end没有用var声明，会变成全局变量，可能干扰其他逻辑运行。
3. Angular工厂使用方式错误：你用new PaginationFactory(...)的方式调用工厂，不符合Angular工厂的设计规范——工厂应该返回可调用的函数/对象，而非作为构造函数使用。
4. 分页数据更新逻辑不严谨：POST请求返回新数据后，可能没有重置页码，导致当前页超出新数据的总页数，看起来数据没变化。

修复后的完整代码 #

1. 修正PaginationFactory

angular.module('customers')
 .factory('PaginationFactory', function() {
  // 工厂返回一个初始化函数，符合Angular的使用方式
  return function($scope, action) {
    var callerAction = action; // 保存传入的action参数
    $scope.filteredPages = [];
    $scope.currentPage = 1;
    $scope.numPerPage = 10;
    $scope.maxSize = 15;

    $scope.makePages = function() {
      $scope.search_customers = [];
      angular.forEach($scope.get_list, function(item) {
        if (callerAction === 'search_customers') {
          $scope.search_customers.push(item);
        }
      });
    };

    // 用$watchGroup监听多个变量变化，比字符串拼接更可靠
    $scope.$watchGroup(['currentPage', 'numPerPage'], function() {
      var begin = (($scope.currentPage - 1) * $scope.numPerPage);
      var end = begin + $scope.numPerPage; // 修复变量声明问题
      if (callerAction === 'search_customers') {
        $scope.filteredPages = $scope.search_customers.slice(begin, end);
      }
    });

    // 初始化分页数据
    $scope.makePages();
  };
});

2. 修正控制器里的POST请求逻辑

// 确保控制器注入了PaginationFactory
angular.module('customers').controller('YourCustomerController', function($scope, $http, PaginationFactory) {
  $scope.searchCustomers = function() {
    $scope.status = $scope.selected.charAt(0);
    $http.post(API_URL+"v1/customers/search", $scope.searchData)
     .then(function(response){
        var action = 'search_customers';
        $scope.get_list = response.data;
        // 调用工厂的初始化方法，无需new
        PaginationFactory($scope, action);
        // 重置页码到第一页，避免旧页码超出新数据范围
        $scope.currentPage = 1;
      }, function(response) {
        console.log("no data");
      });
  };
});

3. HTML部分（确保数据绑定正确）

<!-- 用filteredPages展示分页后的数据 -->
<div ng-repeat="customer in filteredPages">
  <!-- 这里放你的客户数据展示内容，比如{{customer.name}}等 -->
</div>

<!-- 分页组件保持不变 -->
<ul uib-pagination total-items="search_customers.length" ng-model="currentPage" max-size="maxSize" boundary-link-numbers="true" rotate="false">
</ul>

额外建议 #

• 尽量避免直接在工厂里修改控制器的$scope，更好的做法是把分页逻辑封装成独立服务，返回分页数据和方法，然后在控制器里绑定，这样代码更解耦、可复用。
• 可以在makePages里添加空数据判断，避免当$scope.get_list为空时出现错误。

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