將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

回答

相關問題