Question

我有一个angularjs应用程序，它上面有一个菜单。当用户在菜单中导航时，使用$ location命令更改视图。每个视图都有自己的控制器。

我希望在更改菜单中的视图后保留一些“活动”视图，这样当用户返回上一个视图时，它处于相同的状态且具有相同的数据。

我怎么能这样做？

提前致谢。

Answer 1

IMO，您可以使用浏览器的本地存储空间在重新加载时保留要保留的页面上的数据。

检查： https://github.com/grevory/angular-local-storage

基本上，在相关页面的控制器中，如果本地存储中存在数据，则从中构建页面呈现，否则将显示具有默认值的页面。

只要用户在此页面上进行了更改，您就会更新本地存储中的相关数据集。

请注意，您可能希望随时清除本地存储，可能是在用户刚刚断开连接时。

就个人而言，我在整个用户导航过程中使用它来保存关于项目列表的搜索过滤器的状态。

您可能对HTML 5中引入本地存储感兴趣： http://diveintohtml5.info/storage.html

Answer 2

服务可能就是您所需要的。

您可能会点击一项服务，该服务仅用于存储控制器的数据。

angular
    .module('foo')
    .service('ContextualDataService', function () {
        'use strict';

        var data = {},
            storageIdentity = 'contextualDataService';
        return {
            get: function (key) {
                return data[key];
            },
            set: function (key, value) {
                data[key] = value;
            },
            save: function () {
                localStorage.setItem(storageIdentity, JSON.stringify(data));
            },
            load: function () {
                 var items = JSON.parse(localStorage.getItem(storageIdentity));

                 if (items) {
                      for (var key in items) {
                           data[key] = items[key];
                      }
                 }
            }
        };
});

稍后您可以使用它并将控制器或任何东西隔离为命名空间

angular
    .module('foo')
    .controller('BarController', ['ContextualDataService', function (context) {
        var myData = context.get('foo.controllers.bar.savedKey') || 'myDefaultSavedKeyValue';

}]);

Angularjs：每次都不加载视图

2 个答案: