CODEWITHSUNDEEP
angularjs
dev777
dev777

Reputation: 1019

How to send data from one controller to other in angularjs

How to send the json data from FirstCtrl to secondCtrl using angularjs.

Can anyone please help me out regarding this ...

First.js:

angular.module('myApp')
    .controller('FirstCtrl', function ($scope) {

    //firstCtrl json data
       $.getJSON("sample.json", function (json) {
            console.log(json);
         });
    });

Second.js:

angular.module('myApp')
    .controller('secondCtrl', function ($scope) {

       //get the firstCtrl json data here
    });

Upvotes: 1

Views: 10371

Answers (5)

bairavand
bairavand

Reputation: 357

Just use $rootScope to achieve this. In your first controller assign $rootScope.json = $scope.json; and It will available on the entire application. So, you can access $rootScope.json wherever you want on that particular app

Upvotes: 0

Theo Itzaris
Theo Itzaris

Reputation: 4681

I would also suggest a service that gets and returns data from and to the controllers.

we create the two controllers and then we create a service with two functions: 1. one to get the json data 2. one to return the json data

Like so:

'use strict';
angular.module('myApp', [])

.controller('FirstCtrl', function( $scope, myService ){
 //we create or get the json object
 $scope.myjsonObj = {
      'animal':'cat',
      'feed':'frieskies',
      'color':'white',
      'sex':'male'
      };

      //pass the json object to the service
      myService.setJson($scope.myjsonObj);
})

.controller('SecondCtrl', function( $scope, myService ){
        //call service getJson() function to get the data
       $scope.myreturnedData = myService.getJson();
})
 .factory('myService', function(){
    var myjsonObj = null;//the object to hold our data
     return {
     getJson:function(){
       return myjsonObj;
     },
     setJson:function(value){
      myjsonObj = value;
     }
     }

});

and the HTML partial would be:

 <div ng-app="myApp">
        <div ng-controller="FirstCtrl">
          {{myjsonObj}}
        </div>
        <hr>
        <div ng-controller="SecondCtrl">
            {{myreturnedData.animal}}
            {{myreturnedData.feed}}
            {{myreturnedData.color}}
            {{myreturnedData.sex}}
        </div>

Hope helps, good luck.

Upvotes: 4

Eymen Elkum
Eymen Elkum

Reputation: 3141

Yo can simply make a new service with two functions one to save the date and one to give them, this service then can be accessed from any where. In addition, you can assign the data to a $rootScope.someVar for example, and in this way too you can retrieve the data from any where

Upvotes: 0

Suresh B
Suresh B

Reputation: 1652

 var app = angular.module('myApp', []);
 
 app.controller('Ctrl1', function ($scope, $rootScope) {
 $scope.msg = 'World';
 $rootScope.name = 'AngularJS';
 });
 
 app.controller('Ctrl2', function ($scope, $rootScope) {
 $scope.msg = 'Dot Net Tricks';
 $scope.myName = $rootScope.name;
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html>

<body ng-app="myApp">
<div ng-controller="Ctrl1" style="border:2px solid blue; padding:5px">
 Hello {{msg}}!
 <br />
 Hello {{name}}!
 (rootScope)
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid green; padding:5px">
 Hello {{msg}}!
 <br />
 Hey {{myName}}!
 <br />
 Hi {{name}}! (rootScope)
</div>
 
</body>
</html>

Upvotes: 1

prime
prime

Reputation: 2074

If the second controller is nested you can use $parent to access the scope of the first controller. You would need to assign the value of json to $scope such as

$scope.json = my_json

Then in the second controller you can say

$scope.json = $scope.$parent.json;

Upvotes: 1

Related Questions