/ / Użyj zakresu od wielu kontrolerów na stronie - angularjs

Użyj zakresu od wielu kontrolerów na stronie - angularjs

Więc podzieliłem mój interfejs na podskładniki, ale potem zdałem sobie sprawę, że jeden z komponentów wymaga reakcji na zmianę dropdown, która jest przechwytywana przez kontroler nadrzędny.

Mogę utworzyć wspólną usługę dla zmiennych i mogłem wstrzyknąć kontroler podrzędny, aby móc uruchamiać funkcje, ALE.

jak wtedy użyć zakresu w kontrolerze podrzędnym?

var ctrl1= $scope.$new();
$controller("ctrl", { $scope: ctrl1});
ctrl1.GetData();

to działa dobrze. Widzę dane wracające do konsoli. ALE mój ui się nie zmienia. Czego mi brakuje?

Edytowałem post, aby zilustrować to, co staram się robić wyraźniej.

Upadek zmiany jest przechwytywany przez kontroler nadrzędny, ale wymaga od kontrolera podrzędnego, aby uciekł i uzyskał dane oraz zaktualizował interfejs użytkownika.

Jest to próba rozdzielenia komponentów, czy jest to możliwe, czy też podziały komponentów za daleko?

<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>

Odpowiedzi:

1 dla odpowiedzi № 1

dla wszystkich zainteresowanych tutaj, jak to obejść.

Stworzyłem usługę wspólną między tymi dwomakontrolerów. i utworzył wywołanie zwrotne w usłudze. zarejestrowałem połączenie z powrotem na ctrl2, więc gdy zmienna współdzielona zmieni się, kontroler2 zrobi to, co chcę, a zakres zostanie odświeżony.

<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 dla odpowiedzi nr 2

Ogólny przykład przekazywania zmiennych z jednego kontrolera do drugiego

<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>

To jest plik javascript do tego

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

Oto blog wyjaśniający ten przepływ: Często zadawane pytania w angularjs

Ma wersję demo tego, co napisałem. Szczęśliwe kodowanie .. !!