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

Here is a plunker with full source.

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

但是当我切换到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初学者，所以不知道这是不是最佳实践。此外，还有其他一些“状态”更难以存储和检索（比如滚动位置到搜索结果列表中，在我的情况下），而且我无法满意地解决（仅通过一些hackery）。

由于我认为服务是单例类，因此实例化一次，它们似乎是存储状态的好地方。如果你没有服务来存储状态（或者感觉很奇怪），{ {1}}（就像你提到的那样）也是一种选择。这是一个jsfiddle，帮助我了解如何存储和检索它。

$ cacheFactory $ resource页面状态AngularJS

1 个答案: