角度保存/序列化$scope状态

Question

我用很多模型和观察者构建了一个非常复杂的控制器。我希望能够保存控制器模型的当前状态，这样用户就可以点击"保存到草稿"。

我曾想过序列化整个$scope对象，但这似乎是不可能的。

对于这个问题，你有什么优雅的解决方案吗？

Answer 1

您应该将所有模型放在一个$scope字段中，例如state。

$scope.state = {model1: 'value 1', model2: 'value 2'};

然后，您可以存储完整的控制器状态，仅存储此单个字段。

Answer 2

一个优雅的答案可能是尝试序列化您试图从$scope中保留的数据，并在需要时重新应用它（将其保存到server/cookies/localstorage）。

为什么要保留整个范围对象，而不仅仅是您需要的数据？

不过，我可能无法完全理解你的问题。

此外，如果您使用的是冲压机，如angular ui路由器，则可以保持当前页面状态。

Answer 3

您不应该使用$scope将所有数据存储到中。为此，请使用服务和提供商。通过这样做，您可以使用在不同控制器上创建的服务，而无需重写代码。所有的逻辑都应该在那些服务中，而不是在控制器中。服务是单例的，它在您的控制器之间共享。只使用$scope将模型公开到html中，如果你不需要模板中的数据，就不要把它放在那里。如果你在$scope中放入了太多数据，你的应用程序将运行较慢，因为它将被添加到$watch

Answer 4

这就是我保存$scope状态副本的方法（使用lodash）：

function copyScope(scope) {
    return _.pick(scope, function (index, key) {
        return typeof (scope[key]) !== 'function' && key.charAt(0) !== '$';
    });
}

在我的控制器中，我监视$scope状态的变化：

$scope.$watch(function watchScope() {
    return copyScope($scope);
}, function saveScope(scopeCopy) {
    // stateManager stores it as JSON in local storage
    stateManager.set(stateKey, scopeCopy);
}, true);

要加载状态，只需获取反序列化的JSON并将其放在您的作用域中：

angular.extend($scope, JSON.parse(scopeCopyJson));