AngularJS envoyer des données du contrôleur à un autre contrôleur

Question

Bonjour les gars Je veux envoyer les données $ scope.test pour l'utiliser dans mon autre contrôleur "FormCtrl" Et dans $ scope.content est un ID et de nombreux autres objets et en $ scope.test est également un identifiant que je veux utiliser les deux données en même id ... mais le plus important est d'obtenir les données scope.test pour l'utiliser dans 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

cela dépend comment votre hiérarchie est construite. Supposons que vous souhaitiez utiliser les données de BackendCtrl dans votre FormCtrl. Si votre FormCtrl se trouve à l'intérieur de votre BackendCtrl, comme ceci:

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

alors le FormCtrl hérite de toutes les variables qu'il est. Vous pouvez les appeler comme ils étaient dans le cadre de FormCtrl, parce qu'ils sont en réalité:

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" 
}); 

---

Si vos contrôleurs sont frères et soeurs, comme ceci:

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

votre seule option propre est à injectez $rootScope et diffusez vos variables nécessaires à toutes les portées enfants.

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" 
    }); 
}); 

---

Si votre FormCtrl est le parent de BackendCtrl, comme ceci:

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

alors vous devez émettre les données de votre BackendCtrl puis l'utiliser dans FormCtrl:

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" 
    }); 
}); 

---

Mais il n'est pas recommandé de faire l'utilisation des deux dernières options, car cela raterait le point sur l'ensemble de la portée et du contrôleur. Si vous voulez accéder à des données d'un contrôleur d'un autre contrôleur qui n'est pas son parent, la meilleure façon de le faire est de le définir comme parent ou, bien sûr, de définir les données dans un contrôleur parent nouvellement créé.