堆栈内存溢出
  繁体   English   中英

如何在angularjs中将数据从一个控制器发送到另一个

[英]How to send data from one controller to other in angularjs

 原文  2016-02-15 09:42:45  2   5    angularjs

问题描述

如何使用angularjs将JSON数据从FirstCtrl发送到secondCtrl。

谁能帮我解决这个问题...

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 个解决方案

解决方案1
 4 已采纳  2016-02-15 11:02:38

我还将建议一种从控制器获取数据并向控制器返回数据的服务。

我们创建两个控制器，然后创建具有两个功能的服务：1.一个用于获取json数据2.一个用于返回json数据

像这样： 

'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;
     }
     }

});

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>

希望有帮助，祝你好运。

解决方案2
 1  2016-02-15 09:53:24

如果第二个控制器是嵌套的，则可以使用$ parent访问第一个控制器的范围。 您需要将json的值分配给$ scope，例如 

$scope.json = my_json

然后在第二个控制器中，您可以说 

$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

您可以简单地提供一项具有两项功能的新服务：一项用于保存日期，一项用于提供日期，然后可以从任何地方访问此服务。 此外，例如，您可以将数据分配给$rootScope.someVar ，也可以通过这种方式从任何位置检索数据

解决方案5
 0  2018-08-13 13:56:06

只需使用$rootScope即可实现。 在您的第一个控制器中，分配$rootScope.json = $scope.json; 并且它将在整个应用程序中可用。 因此，您可以在特定应用程序上的任何位置访问$rootScope.json

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 AngularJS通过控制器将数据从一个指令发送到另一指令 如何将数据从一个控制器发送到angularjs中的另一个控制器 Angular.js如何将数据从一个模块发送到另一个模块 如何从控制器AngularJS发送数据以进行查看 如何在AngularJs 1.7.x中从一个控制器调用方法到另一控制器，以刷新UI数据 如何通过数据响应将数据从Spring控制器发送到angularjs控制器 AngularJS如何在另一个控制器中使用一个控制器的功能 如何在angularjs中从另一个控制器调用一个控制器的功能？ 如何在MeanJS中将数据从angularjs控制器发送到server（nodejs）控制器 如何在 AngularJS 中将数据从子控制器发送到父控制器？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM