Poświęciłem trochę czasu, aby znaleźć najlepszy sposób na zrobienie tego. Chciałem też zachować stan, w którym użytkownik opuszcza stronę, a następnie naciska przycisk Wstecz, aby wrócić do starej strony; a nie tylko umieszczać wszystkie moje dane w głównym zakresie .
Końcowym rezultatem jest usługa dla każdego kontrolera . W kontrolerze masz tylko funkcje i zmienne, o które nie dbasz, jeśli są wyczyszczone.
Usługa dla kontrolera jest wstrzykiwana przez iniekcję zależności. Ponieważ usługi są singletonami, ich dane nie są niszczone tak jak dane w kontrolerze.
W serwisie mam modelkę. model zawiera TYLKO dane - bez funkcji -. W ten sposób można go konwertować z formatu JSON do przodu i do tyłu, aby go zachować. Użyłem lokalnego magazynu html5 dla trwałości.
Na koniec użyłem window.onbeforeunload
i $rootScope.$broadcast('saveState');
powiadomiłem wszystkie usługi, że powinny zapisać swój stan, i $rootScope.$broadcast('restoreState')
aby dać im znać, aby przywrócić ich stan (używane, gdy użytkownik opuszcza stronę i naciska przycisk Wstecz, aby odpowiednio wrócić do strony).
Przykładowa usługa o nazwie userService dla mojego 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;
}]);
Przykład userController
function userCtrl($scope, userService) {
$scope.user = userService;
}
Widok następnie używa takiego wiązania
<h1>{{user.model.name}}</h1>
Natomiast w module aplikacji , w ramach funkcji run, obsługuję rozgłaszanie stanów saveState i 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');
};
Jak wspomniałem, dojście do tego punktu zajęło trochę czasu. Jest to bardzo czysty sposób, ale zrobienie czegoś, co podejrzewam, że jest bardzo częstym problemem podczas programowania w Angular, wymaga sporo inżynierii.
Chciałbym widzieć łatwiejsze, ale jako przejrzyste sposoby radzenia sobie z utrzymywaniem stanu między kontrolerami, w tym gdy użytkownik opuszcza stronę i wraca do niej.
sessionStorage.restoreState
jest ustawione"true"
. Aby uzyskać prawidłowe rozwiązanie do utrwalania danych podczas odświeżania strony, zajrzyj tutaj . Aby uzyskać trwałe dane, gdy zmienia się trasa, spójrz na odpowiedź Carloscarcamo. Wszystko, czego potrzebujesz, to umieścić dane w usłudze.