Question

关于将视图状态存储为Angularjs中URL的一部分的一般（如果有）一致意见是什么？我将如何进行此操作？我有一个相当复杂的视图/路由，有许多过滤器可供设置，制表符等导致视图状态。

我看到了将所有这些视图组件的状态作为URL的一部分存储在应用程序中的更简单导航中的优势（导航back将恢复上一个视图，所有选择都是在不加载状态的情况下进行的服务器，这将是一个替代方案）。另一个优点是视图状态变为可收藏。

是否有可用于指导的模式？有没有人以前做过这个并且可以分享一些经验？我应该远离在URL中存储视图状态吗？

Answer 1

如果可以将所需数据重新分类为{key，value}，那么您可以使用$location.search()在控制器中保存和检索此信息：

app.controller("myCtrl", function ($scope, $location, $routeParams) {
    // Load State
    var savedState = $location.search();
    allProperties.forEach(function (k) {
        if (typeof savedState[k] !== 'undefined') {
            $scope.model[k] = savedState[k];
        } else {
            $scope.model[k] = defaultValues[k];
        }
    });

    // Save the parameters
    $scope.createUrlWithCurrentState = function() {
         allProperties.forEach(function (k) {
             $location.search(k, $scope.model[k]);
         });
    });
})

现在，您可以使用createUrlWithCurrentState每个ng-change元素input来调用ng-model，并且每次更改都会保存状态，或者您可以调用此函数在ng-click按钮上Create a link to this page。

但是，您必须注意保持allProperties和defaultValues更新，以保存所有必需的参数。

至于是否应该完成，答案取决于您的使用案例。如果你必须允许共享链接，那么很少有选择将状态保存在URL中。

但是，某些州可能不容易序列化或数据可能just be too long to save in the URL。

如果您只想保留当前会话或浏览器的检索信息，可以查看the $cookieStore或the DOM Storage API。

使用Angularjs将视图状态存储在URL中

1 个答案: