Pass data from angular form to another controller

Question

I am new to angularjs. I want to pass data from html form to another route.

Here is the part of index.html

<div ng-app="myApp" ng-controller="HomeController">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div ng-view=""></div>
            </div>
        </div>
    </div>
</div>

Here are the routes

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
   $routeProvider.when('/', {
   templateUrl: 'views/home.html',
   controller: 'HomeController'
});
$routeProvider.when('/about', {
  templateUrl: 'views/about.html',
  controller: 'AboutController'
});
}]);

When the route is / it hits the views/home.html in which it has a form

<form action="#/about" ng-submit="submitData()">
    <input type="text" name="address" ng-model="user.address" />
    <input type="submit" />
</form>

I have a user service whose implementation is

myApp.factory("user", function () {
     return {};
});

I inject user service in HomeController like

 myApp.controller("HomeController", function ($scope, user) {
          $scope.user = user;
          // and then set values on the object

          // $scope.user.address = "1, Mars";    // when uncomment this line it can be accessed on AboutController? Why? Otherwise I cannot access user.address
          console.log($scope.user);
  });

Don note my comment in above code..

and passes user to AboutController like

myApp.controller("AboutController", function ($scope, user) {
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
    console.log($scope.user);
});

Here is the about.html

<p>
    {{ user.address }}
</p>

Problem: {{user.address}} doesn't work on AboutController. I can't see any output... But when i remove the comment from above code.. It only displays hardcoded values in the controller What am I missing?

This is the working demo http://ashoo.com.au/angular/#/

LJ.Wizard · Accepted Answer · 2016-02-25 13:46:29Z

2

At the moment, all your service does is pass a blank object return {}, to any controller into which it is injected. You need a getter/setter approach, so that in your Home view you can set the data, and in your About view you can retrieve it.

So your service could look something like this:

myApp.factory("user", function () {

     var dataObj = {};

     return {
            setData: function(data) {
               dataObj.username = data.username;
            },
            getData: function() {
               return dataObj;
            }
     };
});

Now you can set the data in your Home controller:

myApp.controller("HomeController", function ($scope, user) {

    $scope.submitData = function(data)  {  //pass in ng-model
       user.setData(data);  //call 'user' service to set data
    }
  });

And call it from your About controller:

myApp.controller("AboutController", function ($scope, user) {
    $scope.user = user.getData();  //Assign 
    console.log($scope.user.username);
});

And you html would look like:

<form action="#/about" ng-submit="submitData(user.username)">
    <input type="text" name="address" ng-model="user.username" />
    <input type="submit" />
</form>

answered Feb 25, 2016 at 13:46

LJ.Wizard

6051 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mahendra rajeshirke Over a year ago

Awesome solution

Collectives™ on Stack Overflow

Pass data from angular form to another controller

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related