变量本身改变值？

Question

我有一个简单的 Angular 应用程序，它只是一个带有分页和排序的表格。对表所做的更改（搜索、过滤器、升序/降序排序等）会反映在 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 到处都是我的代码（未发布），发生的情况如下：

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

我 console.log 认为 currentPage 的值在 currentPage $watch 内为 1（有道理，它正在使用我设置的值进行初始化）。之后，它被记录为 17。太棒了，然后 $viewContentLoaded 记录了所有正确的$stateParams。然后在 currentPage 再次被记录为 1 之后..？为什么？？？

在另一个但可能相关的注释中，在初始加载之后，一切都按预期工作，除非我在分页上更改页面，$stateChangeSuccess 运行两次。怎么回事？

编辑：

我想我发现了一个错误：

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

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

Answer 1

除了最后一个之外，事件的顺序和你说的完全一样：

1. 首先设置为 1

   $scope.currentPage = 1;
   

2. 设置为 17

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

3. 然后重新加载页面

   $scope.$watch('currentPage', function() {
   
       $scope.updateURL();
   
          $state.transitionTo(
   

4. 按照步骤 1 再次初始化控制器

   $scope.currentPage = 1;
   

虽然我对第 4 步不是 100% 确定，但应该将其设置为 1 还是应该将其设置为 17...

但顺序与您的流程匹配...