AngularJS中的角度路由和分页

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时，url会变成localhost:3000/search?page=2

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

任何提示或想法来实现这一点？ angularRoute 提供者究竟是怎么做的？

Answer 1

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

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

然后您将拥有一个可以从控制器中检索的“页面”参数。 有类似的东西可能也有效：.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