在AngularJS视图之间切换时保持的范围模型 [英] Maintain model of scope when changing between views in AngularJS

问题描述

我学习AngularJS。说我有使用My2Ctrl可以导航使用选项卡可以看到每个角度都有自己的简单，但不同的形式使用My1Ctrl和/视图2 /厂景。我将如何确保该值在厂景的形式，当用户离开厂景，然后返回到VIEW1不复位输入？我的意思是，怎么能在第二次访问VIEW1有模型完全相同的状态，因为我离开了。

I am learning AngularJS. Say I have /view1 using My1Ctrl and /view2 using My2Ctrl that can be navigated to using tabs where each view has its own simple but different form. How would I make sure that the values entered in the form of view1 are not reset when a user leaves view1 then returns to view1? What I mean is, how can the second visit to view1 have the exact same state of the model as I left it.

推荐答案

我花了一点时间来制定出什么这样做的最好的办法是。我也想保持状态，当用户离开网页，然后pressed的后退按钮而不是只把我所有的数据放到rootscope

I took a bit of time to work out what the best way of doing this is. I also wanted to keep the state, when the user left the page and then pressed the backbutton and not just put all my data into the rootscope

的最终结果是具有用于每个控制器的服务。在控制器中，你只需要你，如果他们被清除不关心函数和变量。

The end result is to have a service for each controller. in the controller, you just have functions and variables that you dont care 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.

在服务，我有一个模型。该模型只有数据，没有任何功能。这样，它可以从JSON转换来回坚持它。我使用了HTML5 localStorage的坚持吧。

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 to persist it.

最后，我用 window.onbeforeunload 和 $ rootScope $广播（'saveState和'）; 让所有服务知道自己应该保存其状态和 $ rootScope。$广播（'restoreState'），让他们知道，以恢复自己的状态。 （用于在用户离开页面和presses后退键返回页面分别）

lastly i used window.onbeforeunload and $rootScope.$broadcast('saveState'); to let all the services know that they should save their state and $rootScope.$broadcast('restoreState') 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)

称为示例服务 userService 我的UserController的

example service called userService for my 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的例子​​

userController example

function userCtrl($scope, userService) {
    $scope.user = userService;
}

视图，然后使用这样的结合

the view then uses binding like this

<h1>{{user.model.name}}</h1>

和应用模块中，在运行函数中我处理saveState和和restoreState的广播

and in the app module, within the run function i handle the broadcasting of the saveState and 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');
};

当我提到这花了一段时间来这一点。它是这样做的一个非常干净的方式，但它是一个公平位Ø工程做一些事情，我会在角被开发时一个很常见的问题怀疑。

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

这篇关于在AngularJS视图之间切换时保持的范围模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！