在重新加载时保持工厂变量

时间:2014-11-17 20:10:37

标签: angularjs factory

我有一个在AngularJS中构建的网站的两个视图,一个用于过滤的帖子列表,另一个用于特定帖子。每个都有自己的控制器,为了实现一个可以将用户返回到过滤列表的按钮,我需要能够将指定的类别和页面传递给特定于帖子的控制器。

我使用工厂实现了以下目的:

app.factory('ListingFactory', function () {
  var listing = {};

  return {
    get: function () {
      return listing;
    },
    set: function (newCategory, newPage) {
      listing.category = newCategory;
      listing.page = newPage;
      return listing;
    }
  }
});

我用来将类别和页面传递到特定于帖子的控制器:

angular.module('app').controller('ListingController', ['$scope', '$rootScope', '$window', '$location', '$anchorScroll', '$stateParams', '$modal', 'Listing', 'Seller', 'Comment', 'ListingFactory', function($scope, $rootScope, $window, $location, $anchorScroll, $stateParams, $modal, Listing, Seller, Comment, ListingFactory) {
  Listing.find($stateParams.id, {bypassCache: true}).then(function(data) { 
    $scope.listing = data;
  });

  var listingData = ListingFactory.get();

  $scope.category = listingData.category;
  $scope.page = listingData.page;

  $window.$scope2 = $scope;
}]);

问题是重新加载特定于帖子的视图会导致重置工厂变量listing。 有办法解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

使用sessionStorage存储更新的值。这将在页面重新加载期间保留这些内容。但是,当页面(浏览器)关闭时,它将消失。

app.factory('ListingFactory', function () {
  var listing = {};

  return {
    get: function () {
      return listing;
    },

    set: function (newCategory, newPage) {
      listing.category = newCategory;
      listing.page = newPage;

      sessionStorage["listingData"] = JSON.stringify(listing);

      return listing;
    },

    init : function() {
       var data = JSON.parse(sessionStorage["listing"]); 
       listing.category = data.category;
       listing.page = data.page;

       return;
    }
  }
});