Я потратил немного времени, чтобы понять, как это лучше всего сделать. Я также хотел сохранить состояние, когда пользователь покидает страницу и затем нажимает кнопку «Назад», чтобы вернуться на старую страницу; а не просто положить все мои данные в корневой каталог .
Конечный результат - иметь сервис для каждого контроллера . В контроллере просто есть функции и переменные, которые вам не нужны, если они очищены.
Служба для контроллера вводится путем внедрения зависимостей. Поскольку сервисы являются одиночными, их данные не уничтожаются, как данные в контроллере.
В сервисе у меня есть модель. модель ТОЛЬКО имеет данные - никаких функций -. Таким образом, он может быть преобразован назад и вперед из JSON, чтобы сохранить его. Я использовал html5 localalstorage для настойчивости.
Наконец, я использовал window.onbeforeunload
и, $rootScope.$broadcast('saveState');
чтобы все службы знали, что они должны сохранить свое состояние, и $rootScope.$broadcast('restoreState')
чтобы они знали, чтобы восстановить свое состояние (используется, когда пользователь покидает страницу и нажимает кнопку «Назад», чтобы вернуться на страницу соответственно).
Пример сервиса под названием userService для моего userController :
app.factory('userService', ['$rootScope', function ($rootScope) {
var service = {
model: {
name: '',
email: ''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
}]);
пример userController
function userCtrl($scope, userService) {
$scope.user = userService;
}
Затем представление использует привязку, как это
<h1>{{user.model.name}}</h1>
А в модуле приложения , в функции запуска я обрабатывать вещание в saveState и restoreState
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (sessionStorage.restorestate == "true") {
$rootScope.$broadcast('restorestate'); //let everything know we need to restore state
sessionStorage.restorestate = false;
}
});
//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
$rootScope.$broadcast('savestate');
};
Как я уже говорил, это заняло некоторое время, чтобы прийти к этой точке. Это очень чистый способ сделать это, но это довольно трудоемкая разработка, чтобы сделать что-то, что, как я подозреваю, является очень распространенной проблемой при разработке в Angular.
Я хотел бы видеть проще, но как чистые способы обработки состояния на контроллерах, в том числе когда пользователь уходит и возвращается на страницу.
sessionStorage.restoreState
установлено"true"
. Чтобы найти правильное решение для сохранения данных при обновлении страницы, посмотрите здесь . Для получения постоянных данных при изменении маршрута посмотрите ответ Карлоскаркамо. Все, что вам нужно, это поместить данные в сервис.$scope.user = userService;
вас есть что - то вроде этого:$scope.name = userService.model.name; $scope.email = userService.model.email;
. Будет ли это работать или изменение переменных в представлении не изменит это в Сервисе?Немного опоздал с ответом, но только что обновил скрипку с некоторыми лучшими практиками
jsfiddle
источник
updateService
должен быть вызван, когда контроллер разрушен -$scope.$on('$destroy', function() { console.log('Ctrl destroyed'); $scope.updateServiceName($scope.name); });
$ rootScope - это большая глобальная переменная, которая подходит для одноразовых вещей или небольших приложений. Используйте сервис, если вы хотите инкапсулировать вашу модель и / или поведение (и, возможно, использовать его в другом месте). В дополнение к сообщению группы Google, о котором упоминается OP, см. Также https://groups.google.com/d/topic/angular/eegk_lB6kVs/discussion .
источник
Angular на самом деле не обеспечивает то, что вы ищете из коробки. То, что я хотел бы сделать, чтобы добиться того, что вы хотите, это использовать следующие дополнения
UI Router и UI Router Дополнительно
Эти два предоставляют вам маршрутизацию на основе состояний и фиксированные состояния, вы можете переключаться между состояниями, и вся информация будет сохраняться, так как область, так сказать, «остается в живых».
Посмотрите документацию по обоим, так как это довольно просто, дополнения к пользовательскому интерфейсу маршрутизатора также хорошо демонстрируют, как работают закрепленные состояния.
источник
У меня была та же проблема, вот что я сделал: у меня есть SPA с несколькими представлениями на одной странице (без ajax), так что это код модуля:
У меня есть только один контроллер для всех представлений, но проблема та же, что и в вопросе, контроллер всегда обновляет данные, чтобы избежать такого поведения, я сделал то, что люди предложили выше, и создал сервис для этой цели, а затем передал его к контроллеру следующим образом:
Теперь я могу вызывать функцию обновления из любого из моих представлений, передавать значения и обновлять мою модель, мне не нужно использовать html5 apis для постоянных данных (это в моем случае, возможно, в других случаях необходимо будет использовать html5 apis, как localalstorage и другие вещи).
источник
Альтернативой услугам является использование хранилища значений.
В базе моего приложения я добавил это
И тогда в моем контроллере я просто ссылаюсь на хранилище значений. Я не думаю, что это имеет значение, если пользователь закрывает браузер.
источник
Решение, которое будет работать для нескольких областей и нескольких переменных в этих областях
Этот сервис основан на ответе Антона, но является более расширяемым и будет работать в нескольких областях и позволяет выбирать несколько переменных области в одной и той же области. Он использует путь маршрута для индексации каждой области, а затем имена переменных области для индексации на один уровень глубже.
Создать сервис с этим кодом:
Добавьте этот код к своей функции запуска в модуле приложения:
Вставьте службу restoreScope в ваш контроллер (пример ниже):
Приведенный выше пример инициализирует $ scope.user для сохраненного значения, в противном случае по умолчанию будет предоставлено значение и сохранит его. Если страница закрыта, обновлена или маршрут изменен, текущие значения всех зарегистрированных переменных области будут сохранены и будут восстановлены при следующем посещении маршрута / страницы.
источник
Вы можете использовать
$locationChangeStart
событие, чтобы сохранить предыдущее значение в$rootScope
или в сервисе. Когда вы вернетесь, просто инициализируйте все ранее сохраненные значения. Вот краткое демонстрационное использование$rootScope
.источник