使用 angular 路由在页面之间传递表单数据

Question

我想构建一个有 2 个选项卡的应用程序，一个选项卡有一个表单，另一个选项卡用于查看表单中填写的数据。我有一个导航，有 2 links，它正在改变一个 ng-view div。我的问题是每当我点击评论 link 时，它都会重置我在表格中填写的所有数据。控制器js：

var MainApp = angular.module("MainApp",['ngRoute']);
   function appRouteConfig($routeProvider){
    $routeProvider.
        when('/',{
            controller: 'MainCtrl',
            templateUrl: 'add.html',
        }).
        when('/review',{
            controller: 'MainCtrl',
            templateUrl: 'review.html',
        }).
        otherwise({
            redirectTo: '/'
        });
}
var MainCtrl = MainApp.controller("MainCtrl", function($scope) {
    $scope.campaign = {cName:''};
});

表单输入例如：

<tr> 
    <td>Campaign Name</td>
    <td><input type="text" id="cName" ng-model='campaign.cName' /></td>
</tr>
<tr>

当我将视图从 add.html（表单所在的位置）更改为 review.html 时，表单中的所有数据都会重置，因此我的评论页面上不会显示任何数据，当我切换时回到 add.html 视图，所有输入都是空白。

有什么方法可以在我切换视图时保留数据？

Answer 1

如果您指的是浏览器选项卡，那么我建议查看 session/local 存储，但如果您指的是在两个视图之间维护数据，那么您将创建一个单独的服务，两个视图（也称为控制器）都可以访问.加载视图时会创建一个新的控制器实例，这就是您丢失数据的原因。

Egghead has great tutorials on all things angular

Answer 2

在上面的示例中，campaign.cName 绑定到 $scope，它是用控制器实例化的，因此在视图之间切换时会丢失。使用活动对象创建服务，并将服务注入控制器。绑定到服务对象将在 views/controllers.

之间保留数据

使用 angular 路由在页面之间传递表单数据

Passing form data between pages with angular routing

forms

angularjs

ng-view

ngroute