Question

我无法根据网址更改网页。我的网址看起来像http://todolist.com/#/1，其中最后一个数字是页码。到目前为止，我的分页工作（角度ui bootstrap）。如果我尝试使用分页行中的数字或按钮更改页面，页面将根据响应进行更改。但网址栏中的网址没有变化，如果我手动更改网址，页面就不会发生变化。

这是我的控制器

controllers.todoCtrl = function ($scope, $timeout, todoFactory, $location, $routeParams) {

    if($routeParams.pageNumber == undefined || $routeParams.pageNumber == null){
        $scope.currentPage = 1;
    } else {
        $scope.currentPage = $routeParams.pageNumber;
    }
    getData();

    //get another portions of data on page changed
    $scope.pageChanged = function () {
        getData();
    };

    /**
     * Get list of todos with pagination
     */
    function getData() {
        todoFactory.index($scope.currentPage).then(function (data) {
            $scope.totalItems = data.paging.count;
            $scope.itemsPerPage = data.paging.limit;
            $scope.todos = data.Todos;
        });
    }

我的路线

app.config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'app/templates/todolists.html',
        controller: 'todoCtrl'
    }).when('/:pageNumber', {
        templateUrl: 'app/templates/todolists.html',
        controller: 'todoCtrl'
    }).otherwise({ redirectTo: '/'});

根据网址工作，我需要做什么才能进行分页。如果您需要任何其他信息，请告诉我，我会提供。谢谢

Answer 1

您可以使用$ route的updateParams函数来更新网址。

所以你的代码看起来像这样：

   //get another portions of data on page changed
    $scope.pageChanged = function () {
        //getData();
        $route.updateParams({pageNumber: $scope.currentPage});
    };

这会导致网址更改。但请记住，这会破坏并重新创建您的控制器。

我个人避免在Angular路由器中使用构建，而是更喜欢使用UI-Router。 UI-Router使用状态库方法，具有良好的干净界面

因此，为了使用UI-Router，您必须从here获取它，或者使用您最喜欢的包管理器安装它。

您的路线将配置如下：

var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider) {
  $stateProvider.state('home', {
     url: '/',
     templateUrl: 'app/templates/todolists.html',
     controller: 'todoCtrl'
  })
  .state("details", {
     url: '/:pageNumber',
      templateUrl: 'app/templates/todolists.html',
       controller: 'todoCtrl'
   });
});

正如您在上面的示例中所看到的，状态通过UI-Router获取名称。您可以稍后在控制器和模板中使用这些名称来引用状态。除此之外，您还可以拥有嵌套状态。

控制器中的示例：

controllers.todoCtrl = function ($scope, $timeout, todoFactory, $location, $state, $stateParams) {

    if(!$stateParams.pageNumber){
        $scope.currentPage = 1;
    } else {
        $scope.currentPage = $stateParams.pageNumber; 
    }
    getData();

    //get another portions of data on page changed
    $scope.pageChanged = function () {
        $state.go("details", {pageNumber: $scope.currentPage });
    };

    /**
     * Get list of todos with pagination
     */
    function getData() {
        todoFactory.index($scope.currentPage).then(function (data) {
            $scope.totalItems = data.paging.count;
            $scope.itemsPerPage = data.paging.limit;
            $scope.todos = data.Todos;
        });
    }

如何根据网址更改网页

1 个答案: