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

问题描述

我正在学习 AngularJS.假设我有 /view1 使用 My1Ctrl，而 /view2 使用 My2Ctrl；可以导航到使用选项卡，其中每个视图都有自己简单但不同的形式.

I am learning AngularJS. Let's 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.

当用户离开然后返回到 view1 时，我如何确保以 view1 形式输入的值不会被重置?

How would I make sure that the values entered in the form of view1 are not reset, when a user leaves and then returns to view1 ?

我的意思是，第二次访问 view1 时如何保持模型的状态与我离开时完全相同?

What I mean is, how can the second visit to view1 keep the exact same state of the model as I left it ?

推荐答案

我花了一些时间来研究什么是最好的方法.我还想保持状态，当用户离开页面然后按下后退按钮时，回到旧页面；而不仅仅是将我所有的数据放入rootscope.

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.

在服务中，我有一个模型.模型只有数据 - 没有功能 -.这样它就可以从 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 for persistence.

最后我使用 window.onbeforeunload 和 $rootScope.$broadcast('saveState'); 让所有服务知道他们应该保存他们的状态，并且 $rootScope.$broadcast('restoreState') 让他们知道要恢复他们的状态(分别用于当用户离开页面并按下后退按钮返回页面时).

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

为我的 userController 调用 userService 的示例服务:

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 示例

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

然后视图使用这样的绑定

The view then uses binding like this

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

在app模块中，在run函数中，我处理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');
};

正如我提到的，这需要一段时间才能达到这一点.这是一种非常干净的方法，但是在使用 Angular 进行开发时，我怀疑这是一个非常常见的问题.

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.

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