Question

我正在使用angular-ui-bootstrap进行分页

searchapp.config(function ($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider
    .when('/search?page', {
      controller: 'classifiedAdController',
      reloadOnSearch: false
  });
});

searchapp.controller('classifiedAdController', function ($scope, $location, $routeParams, ClassifiedAd) {
$scope.$watch('currentPage', function(page) {
      console.log(page);
      $location.search('page', page);
    });
});

这是我的实现，当页面和分页正确加载localhost：3000 / search时，一切正常。然后当我点击第1,2,3页时，网址将更改为localhost：3000 / search？page = 2

但是当我在地址栏中手动复制localhost：3000 / search？page = 2时，它会将我的网址路由回localhost：3000 / search

实现此目的的任何提示或想法？而angularRoute提供商究竟是如何做的？

Answer 1

我会使用更多的Angular方法来做到这一点，你的路线可能是/ search / page / 2，你可以使用：参数为你的角度路线添加参数，它看起来像：

  $routeProvider
    .when('/search/page/:page', {
       controller: 'classifiedAdController',
       reloadOnSearch: false
   });

然后你会有一个＆＃34;页面＆＃34;您可以从控制器检索的参数。它可能有点像：.when('/search?page=:page', {，但我从未尝试过

Answer 2

只需删除路线中的?page

即可

使用此：

$routeProvider
    .when('/search', {
        controller: 'classifiedAdController',
        reloadOnSearch: false
    });

然后在你的控制器中：

  $scope.$watch(function() {
      return $location.search().page
  }, function(newVal, oldVal) {
      $scope.page = newVal;
  });

LIVE DEMO

角度路线＆amp; angularJS中的分页

2 个答案: