AngularJS：在分页时附加到url页码

Question

我正在开发一个应用程序，我通过调用像random/api/endpoint?page=1/2/3这样的服务器来对一些记录进行分页

现在我在分页时，

我需要将我请求的页面附加到http://www.paginate.com/somedata/{1/2/3} 之类的 url，并且在打开此 url 时，它还应该在视图中获取该特定页面 {意思是如果我导航到 hhtp://www.paginate.com/somedata/4 那么应用程序/视图应该反映来自 api 调用 random/api/endpoint?page=4} 的数据。

目前我正在使用具有相同版本 AngularJS 的 angular-route 1.4.12。非常新的角度（2天），任何帮助将不胜感激。

编辑： 我想做什么？

当我在分页时单击下一步时，它应该将 pageNumber 附加到 url。

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 调用 paginate。

为了随时更新 url（以允许用户复制 url 供以后使用的方式），无需更新路由并重新初始化控制器，您只需调用 $location.search({page: page})。当 reloadOnSearch 设置为 false 时调用它（正如您已经完成的那样），它不应该重新初始化控制器。

最后，如果不清楚，您必须在进行 API 调用的同时更新 URL。没有内置的角度方法可以做到这一点，但它应该非常简单。