$ cacheFactory $資源頁面狀態AngularJS

Question

在視圖之間切換以及在控制器之間共享的服務上緩存請求時，如何保留頁面狀態？

我有兩種看法：

$routeProvider.when('/', {templateUrl: 'views/art.html'});
$routeProvider.when('/bio', {templateUrl: 'views/bio.html'});

art.html 具有控制器 Filters

.controller('Filters', ['$scope','Imgur', function($scope, Imgur) {
  $scope.$on('updateAlbumsList', function(e) {
      $scope.albumsList = Imgur.returnAlbumsList();
  });
  $scope.filterAlbum = function(id) {
    Imgur.filterAlbum(id);
  };
  $scope.init = function() {   
    Imgur.getAlbumsList(function(){
      //A hack to preserve page state
      Imgur.loadFilters();
    });
  };
  $scope.init();
}])

這是一個帶有完整來源的插件。

現在，顯然我可以對服務對象執行操作，例如應用過濾器，該過濾器可以更改現有屬性，添加新屬性，甚至可以根據請求添加新對象。

但是，當我切換到bio.html並回到art.html時會發生什么？ 請求再次發送出去，並重新呈現整個頁面！ 我了解這是因為該對象正在通過init()實例化。

• 在視圖之間切換時，如何保留頁面狀態？

• 如何將緩存的請求用於其他控制器共享的相同服務調用？

Answer 1

據我了解（大約一周前才開始使用Angular）， Imgur服務通常被認為是存儲狀態的好地方。

就我而言，我有一個類似的情況，即我有一個用於多個視圖的搜索指令，但是我希望在視圖更改之間保持其狀態。 因此，偽指令使用的服務將保持其自身的狀態：上次執行的查詢，服務器返回的結果的最新列表等。當偽指令的link函數被調用時，它將使用這些值初始化作用域。

看起來像這樣：

// service
myApp.service('SearchService', function(...) {
  var previousQuery   = null;
  var previousResults = [];

  this.getPreviousQuery   = function() { return previousQuery; };
  this.getPreviousResults = function() { return previousResults; };

  this.performSearch = function(query) {
    previousQuery = query;
    ...
  };
});

// directive (but could just as well have been a controller)
myApp.directive('mySearchForm', function(..., SearchService) {
  return {
    ...
    link : function($scope, $element, $attrs) {
      $scope.query         = SearchService.getPreviousQuery();
      $scope.searchResults = SearchService.getPreviousResults();
      ...
    }
  };
});

但是就像我說的那樣，我是Angular的初學者，所以不知道這是否是最佳實踐。 另外，還有其他一些“狀態”更難以存儲和檢索（例如，對於我而言，是滾動到搜索結果列表中的位置），而我卻無法令人滿意地解決（僅通過某些黑客手段）。

由於我認為服務是單例類，因此實例化了一次，因此它們似乎是存儲狀態的好地方。如果您沒有將狀態存儲在其中的服務（或者這樣做很奇怪），則$cacheFactory （例如您提到的）也是一種選擇。 這是一個jsfiddle ，它幫助我了解了如何存儲和檢索它。