2

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

我有两种看法：

$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();
}])

这是一个具有完整源代码的 plunker。

现在显然我可以对服务对象做一些事情，比如应用过滤器，它可以更改现有属性、添加新属性，甚至为每个请求添加新对象。

但是当我切换到bio.html和返回时会发生什么art.html？请求再次发出并重新呈现整个页面！我理解这是因为该对象正在被init().

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

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

4

1 回答 1

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，它帮助我了解如何存储和从中检索。

于 2013-06-01T17:44:23.743 回答