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:

  1. 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();
           }
    
       }
     })
  2. 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()
    
    }
  3. 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>
  4. Mehrere andere view /controller-Paare, hier nicht gezeigt, dass man auch binden und iterieren über das array von Arbeitsaufträgen.

InformationsquelleAutor Larry Lustig | 2013-01-15
Schreibe einen Kommentar