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

时间:2013-06-06 08:27:18

标签: javascript url angularjs state browser-history

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

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

1 个答案:

答案 0 :(得分:1)

您可以使用JSON(或QueryString)形式对其进行序列化。首先执行此操作,然后使用参数作为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参数。

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