StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
16559855
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
9
CommunityOwnedDate
CreationDate
2013-05-15T08:08:18.420
FavoriteCount
0
LastActivityDate
2016-04-19T15:52:24.050
LastEditDate
2016-04-19T15:52:24.050
LastEditorUserId
1939668
OwnerUserId
839952
ParentId
12940974
PostTypeId
2
Score
167
ViewCount
0
LastEditorDisplayName
text
Body
I took a bit of time to work out what is the best way of doing this. I also wanted to keep the state, when the user leaves the page and then presses the back button, to get back to the old page; and not just put all my data into the rootscope. The final result is to have a service for each controller. In the controller, you just have functions and variables that you dont care about, if they are cleared. The service for the controller is injected by dependency injection. As services are singletons, their data is not destroyed like the data in the controller. In the service, I have a model. the model ONLY has data - no functions -. That way it can be converted back and forth from JSON to persist it. I used the html5 localstorage for persistence. Lastly i used <code>window.onbeforeunload</code> and <code>$rootScope.$broadcast('saveState');</code> to let all the services know that they should save their state, and <code>$rootScope.$broadcast('restoreState')</code> to let them know to restore their state ( used for when the user leaves the page and presses the back button to return to the page respectively). Example service called userService for my userController : <pre><code>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; }]); </code></pre> userController example <pre><code>function userCtrl($scope, userService) { $scope.user = userService; } </code></pre> The view then uses binding like this <pre><code><h1>{{user.model.name}}</h1> </code></pre> And in the app module, within the run function i handle the broadcasting of the saveState and restoreState <pre><code>$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'); }; </code></pre> As i mentioned this took a while to come to this point. It is a very clean way of doing it, but it is a fair bit of engineering to do something that i would suspect is a very common issue when developing in Angular. I would love to see easier, but as clean ways to handle keeping state across controllers, including when the user leaves and returns to the page.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POMaintain model of scope when changing between views in AngularJS
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USLotus91
UserOwnerUserId
1. USAnton
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.