J'ai donc divisé mon interface utilisateur en sous-composants, mais je réalise alors que l'un des composants nécessite une réaction à une modification de la liste déroulante interceptée par le contrôleur parent.
Je peux créer un service partagé pour les variables et j'ai pu injecter le sous-contrôleur pour pouvoir lancer des fonctions MAIS.
Comment puis-je utiliser la portée dans le sous-contrôleur?
var ctrl1= $scope.$new();
$controller("ctrl", { $scope: ctrl1});
ctrl1.GetData();
cela fonctionne bien. Je peux voir les données revenir dans la console. MAIS mon ui ne change pas. Qu'est-ce que je rate?
J’ai édité le post pour illustrer ce que j’essaie de faire plus clairement.
La liste déroulante des modifications est interceptée par le contrôleur parent, mais j’ai alors besoin que le contrôleur enfant s’exécute pour obtenir des données et mettre à jour l’UI.
C’est une tentative de scinder les composants. Est-ce possible? Ou de séparer les composants trop loin?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
angular.module("app2", [])
.controller("ctrl2", ["$scope", "$http", function($scope, $http){
$scope.getdata = function(){
$http.post(WebServiceURL)
.success(function(data){
$scope.app2Data = "test2 data";
});
}
}]);
angular.module("app1", ["app2"])
.controller("ctrl1", ["$scope","$controller",function($scope, $controller){
$scope.name = "Controller 1";
//just something to put in the ddp
$scope.data = [
{id:1, name: "test"},
{id:2, name: "test2"}
]
$scope.makeChanged = function(id){
//ddp has changed so i refresh the ui with some other data which is in got by ctrl2.
var cl2 = $scope.$new();
$controller("ctrl2", { $scope: cl2 });
cl2.getdata();
}
}]);
</script>
</head>
<body ng-app="app1">
<div ng-controller="ctrl1">
<p>here is: {{name}}</p>
<select ng-model="d" ng-options="d as dat.name for dat in data track by dat.id" ng-change="makeChanged(d.id)"></select>
<div>
{{app2Data.text}}
</div>
</div>
</body>
</html>Réponses:
1 pour la réponse № 1Pour ceux qui sont intéressés, voici comment j’ai réussi à résoudre ce problème.
J'ai créé un service partagé entre les deuxcontrôleurs. et créé un rappel sur le service. J'ai enregistré l'appel sur ctrl2 donc quand la variable partagée a changé, le controller2 fera ce que je veux et la portée est actualisée
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
angular.module("app1", ["app2"])
.controller("ctrl1", ["$scope", "$controller", "appointmentSharedProperties",
function($scope, appointmentSharedProperties) {
$scope.name1 = "Controller 1";
console.log("ctrl1");
//just something to put in the ddp
$scope.data = [{
id: 1,
name: "test"
}, {
id: 2,
name: "test2"
}];
$scope.makeChanged = function(value) {
//ddp has changed so i refresh the ui with some other data which is in got by ctrl2.
appointmentSharedProperties.setDetail(value);
console.log("in makeChanged: " + value);
}
}
]).service("appointmentSharedProperties", function() {
var test = "";
var __callback = [];
return {
getDetail: function() {
return test;
},
setDetail: function(value) {
test = value;
if (__callback.length > 0) {
angular.forEach(__callback, function(callback) {
callback();
});
}
},
setCallback: function(callback) {
__callback.push(callback);
}
};
});
angular.module("app2", [])
.controller("ctrl2", ["$scope", "appointmentSharedProperties",
function($scope, appointmentSharedProperties) {
$scope.name2 = "Controller 2";
console.log("ctrl2");
var getdata = function() {
console.log("in getdata");
$scope.app2Data = appointmentSharedProperties.getDetail();
}
appointmentSharedProperties.setCallback(getdata);
}
]);
</script>
</head>
<body ng-app="app1">
<div ng-controller="ctrl1">
<p>here is: {{name1}}</p>
<p>here is: {{name2}}</p>
<select ng-model="d" ng-options="d as dat.name for dat in data track by dat.id" ng-change="makeChanged(d.name)"></select>
<div>
{{app2Data}}
</div>
</div>
</body>
</html>0 pour la réponse № 2
Exemple général sur la façon de passer des variables d'un contrôleur à un autre
<html>
<head>
<meta charset="ISO-8859-1">
<title>Basic Controller</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl1">
{{greeting}}
</div>
<div ng-controller="ctrl2">
{{dataToHtml2}}
</div>
</body>
</html>
Ceci est le fichier javascript pour cela
var myApp = angular.module("myApp",[]);
myApp.service("sampleService", function(){
var temp = "";
this.setValue = function(data){
temp = data;
}
this.getValue = function(){
return temp;
}
});
myApp.controller("ctrl1", function($scope,sampleService) {
$scope.greeting = "This line is in first controller but I exist in both";
var data= $scope.greeting;
sampleService.setValue(data);
});
myApp.controller("ctrl2", function($scope, sampleService){
$scope.dataToHtml2 =sampleService.getValue();
});
Voici le blog qui explique ce flux: Foire aux questions dans angularjs
Il a la démo de ce que j'ai écrit. Bonne codage .. !!