How to pass data between 2 views using one controller in AngularJS [duplicate]

Question

The below code contains 2 views and I want to get the data from index to user.

JS code:

var app=angular.module("myApp",[]);

app.controller("MainController",function($scope,$window,$rootScope)
{
    $rootScope.loc={UserName:"",Pwd:""};
    $scope.name="";
    $scope.check=function()
    {
        $scope.name=$rootScope.loc.UserName;

        if(($rootScope.loc.UserName !="") && ($rootScope.loc.Pwd!=""))
        {
            alert($scope.name);
            $window.location = 'user.html'
        }
    }
});

main.html

Name: <input type="text" ng-model="loc.UserName">
Pwd: <input type="text" ng-model="loc.Pwd">
<br><br>
<input type="submit" id="submit" value="Award me" ng-click="check()">

user.html

<h1 id="honor" ng-controller="MainController">{{name}}!!!!</h1>

You can add your data in $rootScope and then use it in your application but using $rootScope is not advised, you should either use controllerAs or make use of a service — Aayushi Jain
– Aayushi Jain, Commented Aug 1, 2017 at 4:04

Sajeetharan · Accepted Answer · 2017-08-01 04:06:50Z

1

Using $rootScope is not recommended, you can make use of angular service to do the same.

Create a service, that will hold model variables.

angular.service("dataService", function() {
    this.value1 = "";  
});

Then you can reference that service in your controllers,

angular.controller("myCntrl1", function($scope, dataService) {
    $scope.dataService = dataService;
});


angular.controller("myCntrl2", function($scope, dataService) {
    $scope.dataService = dataService;
});

answered Aug 1, 2017 at 4:06

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Sajeetharan Over a year ago

Downvoter write down the reason

Deepz Deepti Over a year ago

Where will the check() function go ? In the service or controller 1 ?

Rohìt Jíndal · Accepted Answer · 2017-08-01 09:47:29Z

We can create a service to set and get the data between the controllers and then inject that service in the controller function where we want to use it.

Service :

app.service('setGetData', function() {
  var data = '';
    getData: function() { return data; },
    setData: function(requestData) { data = requestData; }
});

Controllers :

app.controller('myCtrl1', ['setGetData',function(setGetData) {

  // To set the data from the one controller
  var data = 'Hello World !!';  
  setGetData.setData(data);

}]);

app.controller('myCtrl2', ['setGetData',function(setGetData) {

  // To get the data from the another controller  
  var res = setGetData.getData();
  console.log(res); // Hello World !!

}]);

Here, we can see that myCtrl1 is used for setting the data and myCtrl2 is used for getting the data. So, we can share the data from one controller to another controller like this.

Collectives™ on Stack Overflow

How to pass data between 2 views using one controller in AngularJS [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related