Question

我有一个简单的角度应用程序，它只是一个具有分页和排序的表。对表进行的更改（搜索，过滤器，升序/降序排序等）将反映在URL中。我是用ui.router做的。

单击分页上的数字时，表格会正确更新，URL会显示正确的页码。但是，如果我获取URL并直接访问它，它会记录正确的数字一秒钟，然后重置为1.本身。它没有被分配到任何地方。

我疯狂地试图找到为什么会这样。其他所有内容都适用于初始URL加载。如果我在初始URL访问中将搜索或列排序，它将正确处理它。然而，分页看起来似乎有自己的想法。我错过了什么吗？是否有理由将自己重新设定为1？

HTML：

<pagination items-per-page="25" total-items="117" ng-model="currentPage"></...>

角：

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('filter', {
            url: '/column/:column/desc/:sort/search/:search/page/:page/',
            parent: 'parentState',
            controller: 'Ctrl'
        });
    }
]);
app.controller('Ctrl', function($scope, $state, $stateParams) {
    $scope.currentPage = 1;
    $scope.totalItems = 0;
    $scope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
        $scope.sorting.predicate = toParams.column;
        $scope.sorting.reverse = boolVal(toParams.sort);
        $scope.currentPage = Number(toParams.page);
        $scope.searchBuffer = JSON.parse(toParams.search);
    });
    $scope.$watch('currentPage', function() {
        $scope.currentRow = ($scope.currentPage - 1) * $scope.itemsPerPage;
        $scope.updateURL();
    }, true);
    $scope.updateURL = function() {
        $state.transitionTo('filter', {
            column: $scope.sorting.predicate,
            desc: $scope.sorting.reverse,
            search: angular.toJson($scope.searchBuffer),
            page: Number($scope.currentPage)
        });
    }
});

我console.log遍及我的代码（未发布），会发生以下情况：

如果我转到网址www.mydomain.com#/column/'columnname'/desc/false/search/{}/page/17/，考虑到我的分页中至少有17页：

I console.log currentPage的值在currentPage $watch内是1（理所当然，它是用我设置的值初始化的）。之后，它被记录为17.很棒，然后$ viewContentLoaded记录所有正确的$stateParams。然后在currentPage再次记录为1 ..？为什么???

在一个不同但可能相关的注释中，在初始加载之后，一切都按预期工作，除非我在分页时更改页面，$stateChangeSuccess运行两次。发生了什么？

修改

我想我发现了一个错误：

当我完全从我的HTML中删除分页时，重置为1会停止发生。这让我得出的结论是，当我尝试更改页面时，分页可能还没有准备好/没有加载所有数据，所以它回到1.有没有人知道如何绕过这种行为？

即使我在转换状态时放置了很长的延迟（10秒），仍然重置为1.

Answer 1

事件的顺序与你说的完全相同，除了最后一个：

首先设置为1
```
$scope.currentPage = 1;
```

将其设为17

 $scope.$on('$stateChangeSuccess',
      $scope.currentPage = Number(toParams.page);

然后重新加载页面

$scope.$watch('currentPage', function() {

    $scope.updateURL();

       $state.transitionTo(

按照步骤1再次启动控制器
```
$scope.currentPage = 1;
```

虽然我不是100％肯定第4步，但应将其设置为1或将其设置为17 ......

但序列与您的流程相匹配......

可变价值本身？

1 个答案: