Sharing-observable-array-Referenz zwischen Controller in AngularJS
Ich Schreibe eine AngularJS-Anwendung, in der ein array (eine Liste der aktiven Aufträge) ist in vielen verschiedenen Steuerungen. Dieses array wird aktualisiert in regelmäßigen Abständen mit einem $http
Aufruf an den server. Um diese Informationen teilen, die ich gelegt habe, das array in eine service.
Array in den Dienst startet leer (oder, für debugging-Zwecke, mit dummy-Werten ["A", "B", "C"]
) und fragt dann den server zum initialisieren der Liste. Leider sind alle meine Controller scheinen gebunden zu sein, um die pre-abgefragt-version des Arrays -- in meiner Anwendung alles, was ich sehe, sind die dummy-Werte, die ich initialisiert das array mit.
Mein Ziel ist, binden Sie das array in meinem Controller in der Weise, dass die Winkel werden erkennen, dass das array wurde aktualisiert und verursachen meiner Ansicht neu zu Rendern, wenn das array ändert, ohne dass ich mich um die Einführung einer $watch
oder Kraft meine $http
Aufruf auf Ergebnisse warten.
Frage: Wie kann ich binden das wo_list array aus meinem Dienst zu meinem controller so, dass Eckige behandelt es wie eine normale beobachtbare Teil des Modells?
Habe ich:
-
Einen service, dass die das array enthält, und eine refresh-Funktion dient zum initialisieren und aktualisieren Sie regelmäßig das array vom server (ich weiß, das ist eine Arbeit, die von der
console.log()
Nachricht). Für debugging-Zwecke bin ich initialisieren Sie das array mit den Platzhaltern "A", "B" und "C" - die eigentlichen Aufträge sind fünf stellige Zeichenfolgen.angular.module('activeplant', []). service('workOrderService', function($http) { wo_list = ["A", "B", "C"]; //Dummy data, but this is what's bound in the controllers. refreshList = function() { $http.get('work_orders').success(function(data) { wo_list = data; console.log(wo_list) //shows wo_list correctly populated. }) } refreshList(); return { wonums: wo_list, //I want to return an observable array here. refresh: function() { refreshList(); } } })
-
Einen controller gebunden werden muss, um das array in workOrderService, so dass ich zeigen kann, eine Liste von Arbeitsaufträgen. Ich bin verbindlich, sowohl der service und das array zurückgegeben, die durch den Dienst in zwei verschiedenen versucht, diese zu arbeiten.
function PlantCtrl($scope, $http, workOrderService) { $scope.depts = [] $scope.lastUpdate = null $scope.workorders = workOrderService $scope.wonums = workOrderService.wonums //I want this to be observable $scope.refresh = function() { $scope.workorders.refresh() $http.get('plant_status').success(function(data) { $scope.depts = data; $scope.lastUpdate = new Date() }); } $scope.refresh() }
-
Einer Vorlage anzeigen, dass er iteriert über die array gebunden in der pflanze Steuerung zum drucken einer Liste von Arbeitsaufträgen. Ich mache zwei versuche, um diese Arbeit, die endgültige version wird nur noch die ul-element einmal.
<div ng-controller="PlantCtrl"> <div style='float:left;background-color:red' width="20%"> <h2>Work Orders</h2> <ul> <li ng-repeat="wonum in workorders.wonums"><a href=""> {{wonum}} </a></li> </ul> <ul> <li ng-repeat="wonum in wonums"><a href=""> {{wonum}} </a></li> </ul> </div> </div>
-
Mehrere andere view /controller-Paare, hier nicht gezeigt, dass man auch binden und iterieren über das array von Arbeitsaufträgen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sehen, ob dieser Ihr problem löst:
Statt
wo_list = data
füllen Sie das gleiche array. Bei der Zuweisung eines neuendata
array wo_list, verlieren Sie die Bindungen an die alten array-D. H., Ihre Controller werden wohl noch an die früherendata
array.Sehen https://stackoverflow.com/a/12287364/215945 für mehr info.
Update: eckig.kopieren() kann/sollte stattdessen verwendet werden:
Wenn Sie ein Ziel zu dem geliefert wird die copy () - Methode, es werden erste Ziel löschen, Elemente und kopieren in die neue von Quelle.
Können Sie den array, welcher alle regler verwenden, der in einen übergeordneten controller. Da scopes Erben aus höheren Bereiche, dies bedeutet dann, dass alle regler haben die gleiche Kopie des Arrays. Da das array ist ein Modell der höheren Umfang geändert wird, wird die Ansicht aktualisieren, wenn es verwendet wird.
Beispiel:
Müssen Sie nur definieren, die wonums array in der MainController:
Hoffe, das funktioniert für Sie!
div
s im HTML-Code, erzeugt der parent/child und höher/niedriger-Beziehung?