javascript - How to pass data between multiple form views in angulars -
i have multi step form in angularjs. using ui-router routing between different views , ngresource sending data mongodb. problem not able send values of form directly database since form split multiple views. when submit form ng-submit, values of view being sent database.
index.html
<body> <div ui-view></div> </body> multiple views (register.html)
<div class="row"> <div> <div id="form-container"> <div class="page-header"> <h2 class="text-center">enter following details</h2> <!-- links our nested states using relative paths --> <!-- add active class if 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 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 injected here --> <div class="form-elements" id="form-views" ui-view></div> </form> </div> inside view there 2 form views
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> i have written following controller: 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('/'); }); so whenever click submit button values on personaldetails.html view saved in database.... values of signup.html view lost while routing. how can resolve problem. sorry of such long question.
angular re-initializes controller every time different view displayed. 1 way keep around resident state create angular.service , inject controller. service singleton, object instantiated once, , lives lifetime of app.
app.service('formservice', function() { this.data = null; }); then in app.controller declaration, add formservice
app.controller('maincrl', ['$scope', '$resource', '$location', 'formservice', function ($scope, $resource, $location, formservice) { formservice.data = 'something'; });
Comments
Post a Comment