角UI - 過渡到同一狀態更新URL，但後退按鈕破

Question

我有我的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" 
}) 

然後，我有一個角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

OK，我想我有一個解決辦法。

，這是讓後退按鈕工作的解決方案是做到這一點...

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

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

    updateList(); 

}); 

這會觸發你使用$ state.go（每次使用瀏覽器的後退時間和前進按鈕每次）和，而不是把它放在你的控制器代碼中，當你點擊後退按鈕時它不會被重新執行。

最初使用這種方法的問題是，有時我單獨更新我的結果，狀態發生變化，所以我的手錶被觸發，我的AJAX代碼被調用兩次。關鍵是永遠不要更新本表以外的結果列表，並確保每次希望它們更新時，都要先更改狀態或狀態參數。

Answer 2

嘗試注入$rootScope到您的控制器和監聽$stateChangeSuccess即使像這樣：

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