如何在angulars中的多个表单视图之间传递数据
我在angularjs中有一个多步骤的forms。 我使用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('/'); });
所以每当我点击提交button只有personalDetails.html视图上的值保存在数据库…. signUp.html视图的值在路由时丢失。 我该如何解决这个问题。 对不起，这么长的问题。
每次显示不同的视图时，angular度都会重新初始化控制器。 保持常驻状态的一种方法是创build一个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'; });
我刚刚find了这个问题的答案，只是认为这可能会帮助其他人张贴它。 我们需要在我们的服务中创build两个function。 angularjs中的服务是一个概念，数据将被存储在应用程序的整个生命周期中，所以我们需要在控制器中创build两个函数来将数据传递给我们的服务，然后在我们的服务中我们需要编写两个函数来处理这些数据并保持它的一生的应用程序。
首先创buildservice.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(); }; });
现在在服务中的电子邮件function将保存电子邮件数据的应用程序的生命周期，个人function将保存first_name，同时它也保存到数据库的值。
我们需要调用这个函数的方法是通过controller：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); }; }]);
我希望我的回答会帮助别人！