如何将表单数据传递到另一个页面？

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;
        }
    })();
})

下面使用localStorage，可以是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
}])