How to send data from one controller to other in angularjs
Question
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
});
5 answers
solution1
4 ACCPTED 2016-02-15 11:02:38
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.
solution2
1 2016-02-15 09:53:24
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;
solution3
1 2016-02-15 09:57:26
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>
solution4
0 2016-02-15 10:17:04
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
solution5
0 2018-08-13 13:56:06
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.