AngularJS路由。上保存和後退按鈕

我試圖找出最好的方式使用AngularJs路由來實現以下情形恢復狀態：AngularJS路由。上保存和後退按鈕

用戶在使用搜索功能（如電影）的項目清單。
用戶可以搜索和選擇項目，單擊它並在單獨的視圖中查看詳細信息。
一旦他們完成查看項目，他們可以點擊瀏覽器後退按鈕，並返回到先前列表與恢復搜索選項繼續查看列表。

默認ngRoute不提供任何狀態的概念，而這必須單獨實現的（我不知道什麼是最好的解決方案）

使用ui路由器。我從來沒有使用它，我不知道它是否提供了這種功能的開箱即用

2015-05-29 lostaman

可以清除緩存上後退按鈕，當離子確實被刪除的歷史，路徑模板。 –

對於後退按鈕返回到頁面在您的搜索屏幕相同的狀態保存搜索狀態參數，分頁等在網址中：

$location.search({"searchTerm": "jaws", "genre": "fishy", page: 3});

這會將?searchTerm=jaws&genre=fishy&page=3添加到您的URL和重新加載控制器。在控制器設定變量從URL由此開始：

var searchTerm = $location.search().searchTerm; 
var genre = $location.search().genre; 
var page = $location.search().page; 
SearchService.search(searchTerm, genre, page, function(data){ 
    $scope.results = data; 
});

現在，當他們點擊過的結果後退按鈕將恢復正常並重新加載控制器，並與參數。

如果不希望瀏覽器歷史記錄已採取在搜索屏幕的每一個動作，並只希望記錄在歷史使用replace最後的狀態信息：

$location.search({"searchTerm": "jaws", "genre": "fishy", page: 3}).replace();

現在，歷史將只是一個單一的無論所選選項的歷史記錄如何，都可以進入搜索屏幕。

來源

2017-02-23 15:07:51 DavidC

ui-router提供了輕鬆實現這一功能的功能。以下是有關這個完整的帖子：

http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/

因此，重要的事情是：

配置你的路由器的狀態接收頁面參數

$stateProvider.state('list', { 
    url: '/list?page', 
    controller: 'ListCtrl', 
    controllerAs: 'list', 
    templateUrl: 'list.html', 
    params: { 
    page: { 
     value: '1', 
     squash: true 
    } 
    } 
});

處理當控制器初始化頁面參數和頁面的每一個變化更新狀態：

angular 
    .module('your.module') 
    .controller('ListCtrl', function ($state, $stateParams) { 
    var vm = this; 
    vm.page = parseInt($stateParams.page || '1'); // page param is a String 
    loadStuffForList(); //Load elements for list 

    vm.onPageChange = function() { 
     $state.go('.', {'page': '' + vm.page}); 
     // or 
     // $state.go('.', {'page': '' + vm.page}, {'notify': false}); // notify: false -> in case you need it, it will prevent the controller from reloading 
     // loadStuffForList(); 
    }; 
    function loadStuffForList() {...}; 
    });

來源

2017-10-12 16:09:30

AngularJS路由。上保存和後退按鈕

回答

相關問題