javascript - 在AngularJS中的 View 之间更改时保持范围模型

Question

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

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

我的意思是，第二次访问 view1 怎么能保持模型与我离开时完全相同的状态？

Answer 1

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

最终的结果是每个 Controller 都有一个服务。在 Controller 中，您只拥有您不关心的函数和变量，如果它们被清除的话。

Controller 的服务是通过依赖注入(inject)来注入(inject)的。由于服务是单例的，它们的数据不会像 Controller 中的数据那样被销毁。

在服务中，我有一个模型。该模型只有数据-没有功能-。这样它就可以从 JSON 来回转换以保持它。我使用 html5 本地存储进行持久化。

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

为我的 userController 命名为 userService 的示例服务:

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;
}]);

用户 Controller 示例

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

然后 View 使用这样的绑定(bind)

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

在 app 模块 中，在运行函数中我处理 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 中开发时很常见的问题是相当多的工程。

我希望看到更简单但更简洁的方式来处理跨 Controller 保持状态，包括用户离开和返回页面的时间。