Javascript $cacheFactory$资源页状态AngularJS

在视图之间切换以及在控制器之间共享的服务上缓存请求时，如何保持页面状态

我有两种观点：

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

art.html

有一个控制器

过滤器

.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（）

重新实例化

• 在视图之间切换时，如何保持页面的状态

• 如何将缓存请求用于其他控制器共享的相同服务调用

据我所知（我大约一周前才开始与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();
      ...
    }
  };
});

但正如我所说，我是一个有棱角的初学者，所以不知道这是否是一个最佳实践。此外，还有其他一些“状态”更难存储和检索（比如，在我的例子中，将位置滚动到搜索结果列表中），但我无法令人满意地解决这些问题（只是通过一些黑客手段）

因为我认为服务是单例类，因此只实例化一次，所以它们似乎是存储状态的好地方。如果您没有存储状态的服务（或者这样做感觉很奇怪），

$cacheFactory

（就像您提到的）也是一个选项。下面是一个帮助我了解如何存储和检索的示例