$ cacheFactory $資源頁面狀態AngularJS

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

我有兩個觀點：

$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.

很明顯，我可以對服務對象進行處理，比如應用過濾器，這些過濾器可以改變現有的屬性，添加新的屬性，甚至爲每個請求添加新的對象。

但是當我切換到bio.html並返回到art.html會發生什麼？請求會再次發送並重新呈現整個頁面！我明白這是因爲這個對象被init()重新實例化。

如何在視圖之間切換時保留頁面狀態？
如何對其他控制器共享的相同服務調用使用緩存請求？

來源

2013-05-28 Dan Kanze

據我瞭解（我只開始前有角工作一個星期左右），該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（就像你提到的）也是一個選項。這裏有一個jsfiddle，幫助我瞭解如何存儲和檢索它。

來源

2013-06-01 17:44:23 robertklep

$ cacheFactory $資源頁面狀態AngularJS

回答

相關問題