【问题标题】:Saving the modified state of an AngularJS application to the URL将 AngularJS 应用程序的修改状态保存到 URL
【发布时间】:2013-06-02 04:07:21
【问题描述】:

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

在 Backbone.js I could call app.navigate("/form-view/STATE-OF-THE-FORM-SERIALIZED") 重定向之前,表单的状态将保存到浏览器的历史记录中——在 URL 片段中。我将如何为 AngularJS 实现相同的行为?我读过$location 服务,但它不提供那种功能。当我在上面调用path(SMTH) 时,它总是会触发路由处理程序;这不是我想要的,因为那时我必须重定向到外部页面。

【问题讨论】:

标签: javascript url angularjs state browser-history


【解决方案1】:

您可以将其序列化为 JSON(或 QueryString)形式。首先执行此操作,然后将参数作为 URL 的一部分构建 URL。

确保您有两个 URL:一个用于没有任何数据的表单,另一个用于当它有数据时。

$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 来访问URL 中的:data 参数。

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

【讨论】:

  • 感谢您的回答,但这不是重点。从 URL 恢复表单状态没有任何问题。问题在于在 URL 中保留人工所做的更改:输入文本输入、单击复选框等;就在它们发生的时候。这样即使没有提交表单,用户也可以安全地从表单视图导航,然后返回,查看所有保留的更改。
  • @matsko,如果数据如此庞大,我实际上不得不将其作为帖子而不是作为获取来发送怎么办?在这种情况下,我的 URL 不会因为序列化数据太大而被截断吗?
猜你喜欢
  • 2016-04-09
  • 1970-01-01
  • 2012-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-21
  • 2013-02-24
相关资源
最近更新 更多