如何將表單數據傳遞到另一個頁面？

Question

即時通訊使用angularJS v 1.5.6，想知道如何使用$ location.path正確傳遞表單數據。

這是我的代碼頁A：

<form>
...
    <button type="submit" ng-click="submit(formData)">submit</button>
</form>

JS：

app.config(['$routeProvider', function ($routeProvider) {$routeProvider
// Home
.when("/", {
  templateUrl: "A.html", 
  controller: "ACtrl"
})
.when("/B/", {
  templateUrl: "B.html", 
  controller: "BCtrl"
})
  //fallback url if nothing matches
.otherwise({
  redirectTo: '/'
}); 
}]); 
app.controller('ACtrl', function ( $scope, $location, $http) {
$scope.formData = {};
$scope.submit = function() {
    $location.path("/B/" + $scope.formData );
};
});
//controller for B page
app.controller('BCtrl', ['$scope', '$routeParams',
function($scope,$routeParams) {

$scope.formData = $routeParams.formData;
}]);

這是一個非常簡單的示例，但是我不知道如何解決它:(

通過單擊提交，沒有任何反應。 如果我從$ scope.formData中刪除$ scope，則會收到類似以下錯誤：錯誤：未定義formData。

formdata中的術語可用，我用console.log（$ scope.formData）對其進行了測試，一切正常。

這是鏈接插件： https ://plnkr.co/edit/K5zwcmRRyom5HR4a5Q9o

編輯

現在唯一的問題是，如何在foreach循環中正確處理選擇對象。 請幫忙

Answer 1

不要使用location.path ...

您可以使用服務，也可以使用localstorage（或其他一些瀏覽器存儲機制[sessionStorage，indexdb]。

下方服務方式

app.service("SomeService", function () {

    var value = null;

    this.set = function (val) {
        value = val;
        return this;
    }

    this.get = function () {
        return value;
    } 
})

app.controller("ACtrl", function ($scope, SomeService) {

    $scope.formData = {};
    $scope.submit = function() {

        //Assuming you've populated it with some data...
        SomeService.set($scope.formData);

        $location.path("/B/");
    };

})

app.controller("BCtrl", function ($scope, SomeService) {

    $scope.formData;

    (function () {

        //Check that the data is present in the SomeService service.
        var dataFromACtrl = SomeService.get();
        if (dataFromACtrl) {
            $scope.formData = dataFromACtrl;
        }
    })();
})

在下面使用localStrorage可以是sessionStorage。

app.controller("ACtrl", function ($scope, SomeService) {

    $scope.formData = {};
    $scope.submit = function() {

    //Assuming you've populated it with some data...
        window.localStorage.setItem("form_data", JSON.stringify($scope.form_data));
        $location.path("/B/");
    };

})

app.controller("BCtrl", function ($scope, SomeService) {

    $scope.formData;

    (function () {
        var dataFromACtrl = window.localStorage.getItem("form_data");
        if (dataFromACtrl) {
            $scope.formData = JSON.parse(dataFromACtrl);
        }
    })();
})

注意

使用localStorage示例，您需要進行一些清理，在對Bctrl中的數據進行任何處理之后，您需要使用以下任一代碼行清除localstorage中的條目：

window.localStorage.removeItem("form_data");

delete window.localStorage["form_data"];

Answer 2

您可以通過創建服務並使用setter / getter來執行此操作，以傳輸變量。 例如這樣的例子： https : //plnkr.co/edit/IuTXsVLU7dq3TylfnSYP?p=preview

app.service('TransferService', [function(){

 var savedData,
 service = {
   getData: getData,
   setData: setData
 }

 function getData(){
   return savedData
 }

 function setData(data){
   savedData = data
 }

 return service
}])