Question

我的Ui-router设置中有以下代码

.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和网络的其余部分，但找不到任何线索。

Answer 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 */
});

Answer 2

好的，我想我有一个解决方案。

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

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

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

    updateList();

});

每次使用$ state.go（）AND时都会触发每次使用浏览器后退和前进按钮，而不是将其放入控制器代码中，当您按下后退按钮时不会重新执行。< / p>

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

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

2 个答案: