$ cacheFactory $ resource page state 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.

Теперь, очевидно, я могу делать вещи для объекта службы, например применять фильтры, которые могут изменять свойства exhisting, добавлять новые и даже добавлять новые объекты в запрос.

Но что происходит, когда я переключаюсь на 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 $ resource page state AngularJS

ответ

Смежные вопросы