AngularJS senden Daten vom Controller zu einem anderen Controller

Question

Hallo Leute Ich möchte die $ scope.test Daten senden, um es in meinem anderen Controller "FormCtrl" Und in $ scope.content ist eine ID und viele andere Objekte und in $ scope.test ist auch ein id i beiden Daten mit der gleichen ID verwenden will ... aber noch wichtiger ist es, die scope.test Daten zu erhalten, es zu benutzen in FormCtrl ... greez

var app = angular.module('surveyApp', []); 

app.controller('BackendCtrl', function($scope, $http){ 
    var apiURL = "JSON DATA"; 
    var apiURL2 = "DIFFERENT JSON DATA"; 

    $http.get(apiURL).then(function(response) { 
     $scope.content = response.data; 
    }); 

    $http.get(apiURL2).then(function(response) { 
     $scope.test = response.data; 
    }); 

    }); 


app.controller('FormCtrl', function($scope, $http) { 



     $scope.formData = {}; 
     $scope.formData.id = $scope.a.id; 

     $scope.formData.checkbox = "1"; 
     $scope.formData.textarea = $scope.a.id; 

     $scope.save = function(formData) { 
      $scope.submitFormData = angular.copy(formData); 


     $http({ 
      method: 'POST', 
      url: 'update.php', 
      data: $scope.submitFormData, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }); 


     }; 
}); 

Answer 1

es hängt davon ab, wie Ihre Hierarchie aufgebaut ist. Angenommen, Sie möchten Daten von BackendCtrl in Ihrer FormCtrl verwenden. Wenn Ihr FormCtrl innerhalb Ihrer BackendCtrl sitzt, etwa so:

<div ng-controller="BackendCtrl"> 
... 
<div ng-controller="FormCtrl"></div> 
... 
</div> 

dann erbt die FormCtrl alle es Variablen ist. Man könnte sie nennen wie sie im Rahmen von FormCtrl waren, weil sie tatsächlich sind:

var app = angular.module('surveyApp', []); 

app.controller('BackendCtrl', function($scope, $http){ 
    $scope.myVariable = "foo"; 
}); 


app.controller('FormCtrl', function($scope, $http) { 
    console.log($scope.myVariable); // logs "foo" 
}); 

---

Wenn Ihr Controller Geschwister sind, etwa so:

<div ng-controller="BackendCtrl"></div> 
... 
<div ng-controller="FormCtrl"></div> 

Ihre einzige saubere Möglichkeit ist, injizieren Sie $rootScope und übertragen Sie Ihre benötigten Variablen auf alle untergeordneten Bereiche.

var app = angular.module('surveyApp', []); 

app.controller('BackendCtrl', function($scope, $http, $rootScope){ 
    $scope.myVariable = "foo"; 

    $rootScope.$broadcast('broadcastEvent', $scope.myVariable); 
}); 


app.controller('FormCtrl', function($scope, $http) { 
    $scope.$on('broadcastEvent', function(event, broadcastedVariable) { 
     // optional: $scope.myVariable = "foo"; 
     console.log(broadcastedVariable); // logs "foo" 
    }); 
}); 

---

Wenn Ihr FormCtrl ist die Mutter von BackendCtrl, etwa so:

<div ng-controller="FormCtrl"> 
... 
<div ng-controller="BackendCtrl"></div> 
... 
</div> 

dann müssen Sie die Daten von Ihrem BackendCtrl emittieren und es dann in FormCtrl verwenden:

var app = angular.module('surveyApp', []); 

app.controller('BackendCtrl', function($scope, $http, $rootScope){ 
    $scope.myVariable = "foo"; 

    $scope.$emit('broadcastEvent', $scope.myVariable); 
}); 


app.controller('FormCtrl', function($scope, $http) { 
    $scope.$on('broadcastEvent', function(event, broadcastedVariable) { 
     // optional: $scope.myVariable = "foo"; 
     console.log(broadcastedVariable); // logs "foo" 
    }); 
}); 

---

Aber es ist nicht zu empfehlen zu machen Verwenden Sie die letzten beiden Optionen, denn das würde den Punkt über die gesamte Scope- und Controller-Sache verfehlen. Wenn Sie auf Daten in einem Controller von einem anderen Controller aus zugreifen wollen, der nicht der Elternteil ist, ist der beste Weg, es zu tun, es übergeordnete OR zu machen. Natürlich definieren Sie die Daten in einem neu erstellten übergeordneten Controller von beiden.