AngularJS 分頁和更改頁面后調用 post 到服務器，雙重請求

Question

我在我的網站上添加分頁：

<pagination
    ng-model="currentPage"
    total-items="printResult.pg"
    max-size="printResult.pg"
    boundary-links="true">
  </pagination>

 <ul>
    <li ng-repeat="offer in printResult.offers">

      <p>{{offer.name}}</p>
    </li>
  </ul>

現在，當用戶單擊另一個頁面時，腳本應該向服務器調用 post 請求。 它有效，但執行兩次而不是一次。 在螢火蟲中我可以看到，對服務器有兩個請求，應該是一個。

angular.module('PostService', [])
  .controller('PageCtrl', function ($scope, PostModel) {

    var srv = this;
    srv.offers = [];
    var urlFromForm = '';
 $scope.$watch("currentPage + numPerPage", function() {

      if(urlFromForm.url) {
        console.log("Klikam + " + $scope.currentPage);
        console.log("Url:  " + urlFromForm.url);

        pageNumber = $scope.currentPage;
        postUrlToService(urlFromForm);
      }
    });

    function postUrlToService(url) {

      $scope.dataLoading = true;
      $scope.printResult = null;
      urlFromForm = url;
      initCreate();
      PostModel.postUrl(url).then(function (result) {
        srv.offers = result.data;
        $scope.totalItems = srv.offers.pg;
        $scope.printResult = srv.offers;
        $scope.dataLoading = false;
      });
    }

    function initCreate() {
      srv.newUrl = {url: ''};
    }

    srv.postUrlToService = postUrlToService;

  })
  .constant('ENDPOINT', 'http://localhost:8080/api/send')
  .service('PostModel', function ($http, ENDPOINT) {

    var service = this;

    function getUrl() {
      return ENDPOINT;
    }

    service.postUrl = function (url) {

      return $http.post(getUrl(), url);
    };
  }); 

怎么了？

編輯：

我得到一個錯誤，我的函數$scope.$watch執行了兩次。 當我點擊下一頁時，捕獲其編號，但一次是第一頁的編號。 下一頁不亮。 按鈕始終亮起 1 頁。

日志：

WatchPage: 1
 Call postUrlToService [object Object]
Post: [object Object]
Server response: [object Object]
WatchPage: 2
Click + 2
Url:  http://exmaple.com/tring=&bmatch=s0-fas-1-4-0408
 Call postUrlToService [object Object]
Post: [object Object]
WatchPage: 1 //after response code set watchpage to 1, why? 
Server response: [object Object]

響應代碼將 watchpage 設置為 1 后，為什么？ 用戶點擊時如何設置頁面？

編輯

有用。 所有頁面都等於 100，但在鏈接上我可以訪問 10。為什么？

 <pagination total-items="totalItems" items-per-page="itemsPerPage"
              ng-model="currentPage" ng-change="pageChanged()"></pagination>

angular.module('PostService', [])
  .controller('PageCtrl', function ($scope, AllegroModel) {

    var srv = this;
    var urlFromForm = '';
    var pageNumber = '';

    var flag=0;
    srv.offers = [];

    $scope.totalItems = 0;

    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;

    function postUrlToService(url) {

      $scope.dataLoading = true;
      $scope.printResult = null;
      urlFromForm = url;
      initCreate();

      console.log('Call postUrlToService ' + url);

      PageModel.postUrl(angular.extend({},
        {page: pageNumber},url)).then(function (result) {

        srv.offers = result.data;

        console.log('Server response: ' + srv.offers);

        if(flag==0) {
          $scope.totalItems = srv.offers.pg;
        }
        $scope.printResult = srv.offers;
        $scope.dataLoading = false;
        flag=1;
      });
    }

    function initCreate() {
      srv.newUrl = {url: ''};
    }

    $scope.$watch("currentPage", function(newInput, oldInput) {
      if(newInput != oldInput){
        //Do your stuff
        console.log(newInput);
        pageNumber = newInput;
        $scope.currentPage = newInput;
        postUrlToService(urlFromForm);
      }
    });

    srv.postUrlToService = postUrlToService;

  })
  .constant('ENDPOINT', 'http://localhost:8080/api/send')
  .service('PageModel', function ($http, ENDPOINT) {

    var service = this;

    function getUrl() {
      return ENDPOINT;
    }

    service.postUrl = function (url) {
      console.log("Post: " + url);
      return $http.post(getUrl(), url);
    };
  });

Answer 1

$scope.$watch("currentPage + numPerPage", function(newInput, oldInput) {
    if(newInput != oldInput){
        //Do your stuff
    }
});

會解決你的問題。