如何在angularjs中的多个表单视图之间传递数据答案

【问题标题】：How to pass data between multiple form views in angulars如何在angularjs中的多个表单视图之间传递数据
【发布时间】：2015-06-04 22:27:19
【问题描述】：

我在 angularjs 中有一个多步骤表单。我正在使用 ui-router 在不同视图之间进行路由，并使用 ngResource 将数据发送到 mongodb。我的问题是我无法将表单的所有值直接发送到数据库中，因为表单被拆分为多个视图。当我使用 ng-submit 提交表单时，只有该视图的值被发送到数据库。

index.html

 <body>
  <div ui-view></div>
 </body>

多个视图（register.html）

    <div class="row">
    <div>
    <div id="form-container">
        <div class="page-header">
            <h2 class="text-center">Enter the following details</h2>
             <!-- the links to our nested states using relative paths -->
        <!-- add the active class if the state matches our ui-sref -->
            <div id="status-buttons" class="text-center link-colors">
                <a ui-sref-active="active" ui-sref="/registration_form.signUp"><span>1</span> Setup</a>
                <a ui-sref-active="active" ui-sref="/registration_form.personalDetails" ng-disabled="myForm.email.$invalid"><span>2</span> Personal Details</a>

            </div>
        </div>

    </div>
   </div>
</div>
<div class="container">
<form name="myForm" role="form" class="form-horizontal" id="signup-form" ng-submit="createMeetup()" enctype="multipart/form-data" novalidate>
               <!-- our nested state views will be injected here -->

 <div class="form-elements" id="form-views" ui-view></div>
 </form>
 </div>
 <div class="container">
    <form name="myForm" role="form" class="form-horizontal" id="signup-form" ng-submit="createMeetup()" enctype="multipart/form-data" novalidate>
               <!-- our nested state views will be injected here -->
<div class="form-elements" id="form-views" ui-view></div>
</form>
</div>

在这个视图中会有两个表单视图

signUP.html

    <label >Email</label>
    <div >
        <input type="email" name="email" ng-model="employeeEmail" placeholder="email" class="form-control" required>
        <span ng-show="myForm.email.$error.email">Invalid Email.</span>
    </div>
    <a ui-sref="/registration_form.personalDetails">next section</a>

personalDetails.html

<label>First Name</label>
    <div >
        <input type="text" ng-model="first_name" class="form-control">
    </div>
 <button type="submit" name="submit">save</button>

我编写了以下控制器：app.js

var app = angular.module('meetupApp', ['ngResource','ui.router']);
app.controller('mainCrl', ['$scope', '$resource', '$location', function   ($scope, $resource, $location) {
   var Employee = $resource('/api/meetups');



  $scope.employees = [];

  $scope.nextPage = function(){
  $scope.email = $scope.employeeEmail;
  }

  $scope.createMeetup = function () {
  var employee = new Employee();
  employee.email = $scope.employeeEmail;

  employee.first_name = $scope.first_name;

  employee.$save(function (result) {


    });
  }
}]);
    app.config(function($stateProvider, $urlRouterProvider){
   $stateProvider
   .state('/',{
  url:'/',
  templateUrl:'index.html',
  controller: 'mainCrl'
})
.state('/registration_form',{
  url:'/registration_form',
  templateUrl: 'register.html',
  controller: 'mainCrl'
})
.state('/registration_form.signUp',{
  url:'/registration_form.signUp',
  templateUrl:'signUp.html',
  controller:'mainCrl'
  })
   .state('/registration_form.personalDetails',{
    url:'/registration_form.personalDetails',
    templateUrl:'personalDetails.html',
    controller:'mainCrl'
   })

  $urlRouterProvider.otherwise('/');
  });

所以每当我单击提交按钮时，只有personalDetails.html 视图上的值会保存在数据库中...。signUp.html 视图的值在路由时会丢失。我该如何解决这个问题。抱歉问了这么长的问题。

【问题讨论】：

标签： javascript angularjs node.js mongodb

【解决方案1】：

每次显示不同的视图时，Angular 都会重新初始化控制器。保持常驻状态的一种方法是创建一个angular.service 并将其注入您的控制器。服务是一个单例，一个只实例化一次的对象，它在你的应用程序的整个生命周期中都存在。

app.service('formService', function() {
    this.data = null;
});

然后在您的app.controller 声明中，添加formService

app.controller('mainCrl', ['$scope', '$resource', '$location', 'formService', 
    function ($scope, $resource, $location, formService) {
        formService.data = 'something';
});

【讨论】：

感谢您的回复。我是 angularjs 的新手。你能指导我如何通过服务实现我的功能吗？我只需要将电子邮件值传递给新视图，当我点击提交时，甚至电子邮件值也应该与 first_name 一起传递

【解决方案2】：

我刚刚找到了这个问题的答案，只是认为它可能对其他人有帮助，所以发布它。我们需要在我们的服务中创建两个函数。 angularjs 中的服务是一个概念，数据将在应用程序的生命周期中存储，因此我们需要在控制器中创建两个函数来将数据传递给我们的服务，然后在我们的服务中编写两个函数来处理这些数据并在应用的整个生命周期内保留它。

首先创建 service.js 文件：

var EmployeeService = angular.module('EmployeeService',[])
.service('AddEmployee', function($resource){
     var Employee = $resource('/api/meetups');
        var emp_email="";

    this.email = function(email){
        emp_email = email;
        return emp_email;

    };

    this.personal = function(first_name){
            var employee = new Employee();
            employee.email = emp_email;
            employee.first_name = first_name;
            employee.$save();
    };
});

现在服务中的电子邮件功能将在应用程序的生命周期内保存电子邮件数据，个人功能将保存 first_name 并同时将值保存到数据库。

我们需要调用这个函数的方式是通过控制器： app.js

app.controller('mainCrl', ['$scope', '$resource', '$location', 'AddEmployee', function ($scope, $resource, $location, AddEmployee) {

  $scope.nextPage = function(){
  $scope.email = AddEmployee.email($scope.employeeEmail);
   };
  $scope.createMeetup = function(){
  $scope.first_name = AddEmployee.personal($scope.first_name);
  };
}]);

希望我的回答能帮到别人！！

【讨论】：