如何在angularjs中将数据从一个控制器发送到另一个
[英]How to send data from one controller to other in angularjs
问题描述
How to send the json data from FirstCtrl to secondCtrl using angularjs. 
如何使用angularjs将JSON数据从FirstCtrl发送到secondCtrl。
Can anyone please help me out regarding this ... 谁能帮我解决这个问题...
First.js: First.js：
angular.module('myApp')
.controller('FirstCtrl', function ($scope) {
//firstCtrl json data
$.getJSON("sample.json", function (json) {
console.log(json);
});
});
Second.js: Second.js：
angular.module('myApp')
.controller('secondCtrl', function ($scope) {
//get the firstCtrl json data here
});
5 个解决方案
解决方案1
4 已采纳 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 我们创建两个控制器，然后创建具有两个功能的服务：1.一个用于获取json数据2.一个用于返回json数据
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: HTML部分将是：
<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. 希望有帮助，祝你好运。
解决方案2
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. 如果第二个控制器是嵌套的，则可以使用$ parent访问第一个控制器的范围。 You would need to assign the value of json to $scope such as 您需要将json的值分配给$ scope，例如
$scope.json = my_json
Then in the second controller you can say 然后在第二个控制器中，您可以说
$scope.json = $scope.$parent.json;
解决方案3
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>
解决方案4
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 此外，例如，您可以将数据分配给$rootScope.someVar ，也可以通过这种方式从任何位置检索数据
解决方案5
0 2018-08-13 13:56:06
Just use $rootScope to achieve this. 只需使用$rootScope即可实现。 In your first controller assign $rootScope.json = $scope.json; 在您的第一个控制器中，分配$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 因此，您可以在特定应用程序上的任何位置访问$rootScope.json
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.