堆棧內存溢出
  簡體   English   中英

如何在angularjs中將數據從一個控制器發送到另一個

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

 原文  2016-02-15 09:42:45  3   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