Also habe ich meine Benutzeroberfläche in Unterkomponenten aufgeteilt, aber dann merke ich, dass eine der Komponenten auf eine Dropdown-Änderung reagieren muss, die vom übergeordneten Controller abgefangen wird.
Ich kann einen gemeinsam genutzten Dienst für die Variablen erstellen, und ich habe den Sub-Controller so injizieren können, dass ich Funktionen ABER starten kann.
Wie verwende ich dann den Bereich innerhalb des Subcontrollers?
var ctrl1= $scope.$new();
$controller("ctrl", { $scope: ctrl1});
ctrl1.GetData();
das funktioniert gut. Ich kann Daten in der Konsole sehen. ABER mein ui ändert sich nicht. Was vermisse ich?
Ich habe den Beitrag bearbeitet, um zu veranschaulichen, was ich klarer zu machen versuche.
Die Dropdown-Liste für Änderungen wird vom übergeordneten Controller abgefangen, aber dann muss der untergeordnete Controller weglaufen und Daten abrufen und die Benutzeroberfläche aktualisieren.
Es ist ein Versuch, die Komponenten aufzuteilen. Ist das möglich? Oder die Komponenten zu weit aufteilen?
<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>Antworten:
1 für die Antwort № 1für alle, die hier interessiert sind ", wie ich das geschafft habe.
Ich habe einen gemeinsamen Dienst zwischen den beiden erstelltSteuerungen. und erstellt einen Rückruf für den Dienst. Ich habe den Rückruf auf Ctrl2 registriert. Wenn sich die gemeinsam genutzte Variable ändert, wird der Controller2 das tun, was ich möchte, und der Gültigkeitsbereich wird aktualisiert.
<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 für die Antwort № 2
Allgemeines Beispiel für die Übergabe von Variablen von einem Controller an einen anderen
<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>
Dies ist die Javascript-Datei dafür
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();
});
Hier ist der Blog, der diesen Fluss erklärt: Häufig gestellte Fragen in anglejs
Es hat die Demo von dem, was ich geschrieben habe. Viel Spaß beim Codieren .. !!