将AngularJS应用程序的修改状态保存到URL

我有一个相当复杂的HTML表单，用户可以填写和提交。在提交时，我们重定向到第三方网站，根据表单值生成重定向参数。然后，如果用户对第三方网站上的结果不满意，他们会按浏览器的“返回”按钮并返回到表单。此时他们希望看到表单控件处于重定向之前的状态。将AngularJS应用程序的修改状态保存到URL

在Backbone.js I could callapp.navigate("/form-view/STATE-OF-THE-FORM-SERIALIZED")之前的重定向，并且窗体的状态将保存到浏览器的历史 - 在URL片段。我将如何去执行AngularJS的相同行为？我已阅读$location服务，但它不提供这种功能。当我打电话给path(SMTH)时，它总是触发路由处理程序;这不是我想要的，因为我必须重定向到外部页面。

来源

2013-06-06 Ivan Krechetov

你看过角的ui路由器吗？ – Lukus

没有。这个？ https://github.com/angular-ui/ui-router –

您可以使用JSON（或QueryString）形式对其进行序列化。首先做到这一点，然后使用参数作为URL的一部分构建URL。

确保您有两个URL：1表示没有任何数据，另一个表示有数据。

$routeProvider.when('/form-data', { ... }); 
$routeProvider.when('/form-data/:data', { ... });

然后设置一个提交函数来处理传递数据。

$scope.submit = function() { 
    var formData = JSON.stringify($scope.myModel); 

    //redirect to internal angularjs page 
    $location.path('/form-view/' + formData); 

    //or redirect to a local external page 
    $window.location = '/form-view/' + formData; 
};

并为它处理/form-data/:data路线，使用$routeParams来访问的:data PARAM在URL中的控制器。

如果您希望它在另一个页面中弹出，那么您需要制作自己的指令，它会劫持表单提交事件并在处理本机提交之前更改“action”属性以将其更改为序列化格式。

来源

2013-09-14 15:01:19 matsko

感谢您的答案，但那不是重点。我从URL中恢复表单状态没有任何问题。麻烦在URL中保存人类所做的更改：输入文本输入，单击复选框等;正确的时候他们发生。因此，即使没有提交表单，用户也可以安全地从表单视图导航，然后返回，并查看保留的所有更改。 –

@matsko，如果数据如此之大，我实际上不得不将它作为帖子发送，而不是作为get？在这种情况下，我的URL是否会因序列化数据太大而被截断？ –

将AngularJS应用程序的修改状态保存到URL

回答

相关问题