Angular-UI - 转换到相同状态更新 URL 但后退按钮损坏答案

【问题标题】：Angular-UI - Transitioning to same state updates URL but back button brokenAngular-UI - 转换到相同状态更新 URL 但后退按钮损坏
【发布时间】：2014-03-13 16:46:48
【问题描述】：

我的 Ui 路由器设置中有以下代码

.state('contacts.list', {
    url: "",
    templateUrl: "templates/contactsList.tpl.html",
    controller: "ContactsListCtrl"  contactsFilter: "all"
    }
})
.state('contacts.list.paginated', {
    url: "/page/{pageNumber}",
    templateUrl: "templates/contactsList.tpl.html",
    controller: "ContactsListCtrl"
})

然后我有一个 Angular-ui 分页控件，它在页面更改时调用此函数

$scope.pageChanged = function(pageNumber){

    $state.go("contacts.list.paginated", {pageNumber: pageNumber});

    $scope.listParams.offset = (pageNumber -1) * $scope.itemsPerPage;

    updateList(); // Reloads the data for the new page from the server */

};

这种作品。当您从第 1 页单击到第 2 页时，它会从服务器获取下一页数据，将其放在页面上并将地址栏中的 URL 更改为 /2。另外，大概是因为两个状态共享同一个控制器，控制器不会重新执行，这就是我想要的，因为我希望它继续执行我的 $scope.pageChanged() 函数，它确实如此。

到目前为止一切顺利。 URL 更新，数据更新。

问题是当我点击后退按钮时，什么也没有发生。如果点击第 2、3、4 页，然后点击返回按钮，则 URL 会按预期更改回 /page3，但不会执行控制器代码，也不会更新分页控件，也不会调用服务器来获取正确的数据。

另外，如果你已经在这个视图中，在地址栏中手动输入 /page/2 或 /page/3 会导致没有代码被执行，大概是因为它只是参数的变化。

我需要找到一种方法，在您使用后退/前进按钮时让它重新执行控制器代码，或者监听状态/位置的变化，以便在发生这种情况时刷新数据（但第一次点击页面时不要运行两次）。

我已经搜索了 SO 和网络的其余部分，但找不到任何线索。

【问题讨论】：

标签： javascript angularjs angular-ui angular-ui-router

【解决方案1】：

尝试将$rootScope 注入您的控制器并监听$stateChangeSuccess，即使这样：

$rootScope.$on('$stateChangeSuccess', function() {
    $scope.listParams.offset = (pageNumber -1) * $scope.itemsPerPage;
    updateList(); // Reloads the data for the new page from the server */
});

【讨论】：

当状态每次改变时控制器都不会重新执行，因为只有参数在改变，而且，如果我去掉 pageChanged 函数，当用户单击时根本不会发生任何事情页码按钮。
你确定吗？我认为您需要为每条路线使用单独的控制器。
这无济于事，因为我不能为 page/2 page/3 page/4 直到 page/1000 设置不同的控制器
我的意思是只有 2 个控制器，每个路由一个。但我想我现在更好地理解了你的问题。我更新了我的答案；让我知道这是否适合你。
顺便说一句，如果您可以为您的控制器发布您的 HTML 和其余代码，那将会很有帮助。

【解决方案2】：

好的，我想我有办法了。

让后退按钮工作的解决方案是这样做......

$scope.$watchCollection('$stateParams', function(){

    ... calculate page number and offet here...

    updateList();

});

这会在您每次使用 $state.go() 以及每次使用浏览器的后退和前进按钮时触发，而不是将其放在您的控制器代码中，当您点击后退按钮时不会重新执行。

我最初使用这种方法时遇到的问题是，有时我会单独更新我的结果并且状态正在改变，因此我的手表被触发并且我的 AJAX 代码被调用了两次。关键是永远不要在此手表之外更新结果列表，并确保每次希望它们更新时都先更改状态或状态参数。

【讨论】：