AngularJS：附加到網址的頁面數量，同時分頁

Question

我的工作我在哪裏，通過一些記錄通過撥打電話到服務器一樣random/api/endpoint?page=1/2/3

現在我在我分頁，

我需要分頁一個應用程序要追加我請求的網址，如http://www.paginate.com/somedata/{1/2/3}，並打開這個網址它也應該獲取該視圖中的特定頁面{這意味着如果我導航到hhtp://www.paginate.com/somedata/4那麼應用程序/視圖應該反映來自API調用random/api/endpoint?page=4}的數據。

目前我正在使用角路由1.4.12與AngularJS相同的版本。非常新的角（2天），任何幫助將不勝感激。

編輯：我想幹什麼？

當我點擊下一個分頁時，它應該追加pageNumber到網址。

route.js

angular 
    .module('mainRouter', ['ngRoute']) 
    .config(['$routeProvider', function ($routeProvider) { 
     $routeProvider. 
      when('/somedata/:page', { 
       templateUrl: 'partials/somedata.html', 
       controller: 'PaginationCtrl', 
       controllerAs: 'vm', 
       reloadOnSearch: false 
      }). 
      otherwise({ redirectTo: "/somedata/1" }); 
     } 
    ]); 

PaginationCtrl.js

angular 
     .module('controllers.Pagination', []) 
     .controller('PaginationCtrl', PaginationCtrl); 

    PaginationCtrl.$inject = ['$routeParams', 'paginationService']; 

    function PaginationCtrl ($routeParams, paginationService) { 
     var vm = this; 
     vm.paginationData = { 
      perPage: 10, 
      currentPage: 1 
     }; 

     vm.isLoading = false; 
     vm.paginate = paginate; 

     paginate(vm.paginationData.currentPage); 
     calculateTotalPages(); 

     function calculateTotalPages() { 
      paginationService.findAll(0, 0) 
       .success(function (res) { 
        var paginationData = vm.paginationData || {}; 
        paginationData.totalPages = Math.ceil(res.count/paginationData.perPage); 
       }) 
       .error(function (res) { 
        console.log('Error trying to get the total number of pages', res); 
       }); 
     } 

     function paginate (pageNumber, perPage) { 
      vm.isLoading = true; 
      var paginationData = vm.paginationData || {}; 
      if (! perPage) { 
       perPage = paginationData.perPage; 
      } 
      console.log($routeParams); 
      paginationService.findAll(perPage, pageNumber) 
       .success(function (res) { 
        paginationData.items = res.documents; 
        vm.isLoading = false; 
       }) 
       .error(function (res) { 
        console.log('Error fetching more Logs', res); 
       }); 
     } 
    } 

PaginationService.js

angular 
     .module('services.Pagination', []) 
     .service('paginationService', PaginationService); 

    PaginationService.$inject = ['$http', 'Constants']; 

    function PaginationService ($http, Constants) { 
     // console.log($http); 
     this.findAll = function (perPage, page) { 
      var url = Constants.baseUrl + '/sms/get/data'; 
      if (page > 0) { 
       url += '?page=' + page; 
      } 
      return $http.get(url); 
     }; 
    } 

指令使用

var app = angular.module('directives.Pagination', []); 

    app.directive('pagination', [function() { 
     return { 
      restrict: 'E', 
      template: '<div class="ui pagination menu"> \ 
       <a class="icon item" ng-click="vm.previous()"><i class="left arrow icon"></i></a> \ 
       <div class="icon item">{{ vm.paginationData.currentPage }}/{{ vm.paginationData.totalPages }}</div> \ 
       <a class="icon item" ng-click="vm.next()"><i class="right arrow icon"></i></a> \ 
       </div>', 
      scope: '=', 
      link: function (scope, element, attrs) { 
       var vm = scope.vm; 
       vm.paginationData.currentPage = 1; 
       vm.next = function() { 
        vm.paginationData.currentPage++; 
        if (vm.paginationData.currentPage > vm.paginationData.totalPages) { 
         vm.paginationData.currentPage = vm.paginationData.totalPages; 
        } 
        vm.paginate(vm.paginationData.currentPage); 
       }; 

       vm.previous = function() { 
        vm.paginationData.currentPage--; 
        if (vm.paginationData.currentPage < 1) { 
         vm.paginationData.currentPage = 1; 
        } 
        vm.paginate(vm.paginationData.currentPage); 
       }; 
      } 
     }; 
    }]); 

Answer 1

你應該能夠通過$routeParams訪問您的:page參數，你已經在你的控制器已經注入。

只需撥打與$routeParams.page，而不是你的1

爲了你去（以這樣一種方式，它允許用戶複製，供以後使用URL）來更新網址默認分頁，而不更新路由和重新初始化控制器，您可以撥打$location.search({page: page})。當reloadOnSearch設置爲false時（如你已經完成的那樣），它不應該重新初始化控制器。

最後，如果不清楚，您必須在您進行API調用的同時更新URL。沒有一種內置的角度來做到這一點，但它應該是非常簡單的。