Definieren Sie einen Controller und zweimal verwenden

Question

Ich möchte einen Controller für zwei getrennte div und wenn ich das tun, senden $ HTTP-Anfragen zweimal Wie kann ich den Umfang der anderen Controller verwenden? hier ist mein Code:

  <div data-ng-controller="productCTRL"> 
       <span ng-model="basket | count"></span> 
       ....Some HTML Code...... 
      </div> 
      <div data-ng-controller="AuthController"> 
        ....Some HTML Code... 
      </div> 
      <div data-ng-controller="productCTRL"> 
       <ul ng-repeat="product in products"> 
        <li>{{product.title}}</li> 
       </ul> 
      </div> 

Answer 1

Es sieht aus wie Sie den Umfang der anderen Controllers-

Drei sind Möglichkeiten zugreifen möchten

1. Eltern Kind Umfang geerbt communicate- - Sie haben Um einen übergeordneten Controller zu erstellen, kann der untergeordnete Controller über den übergeordneten Bereich kommunizieren. Es wird nur für eng gekoppelte Controller empfohlen.

2. Event-Bus - Subscribe kann auf Ereignis ($ on) hören und Publisher kann mit $ emit (aktueller zu übergeordneter Bereich kann mit $ on zugreifen) oder $ brodcast (aktueller zu untergeordneter Bereich kann mit $ on zugreifen) publizieren. Der Geschwistercontroller kann die Daten nicht mit diesem Ansatz teilen. Um die Daten zwischen den gleichrangigen Controllern zu teilen, können Sie $ rootScope.broadcast verwenden und dieses Ereignis wird von allen Bereichen einschließlich der gleichgeordneten Controller überwacht. Es ist auch mit Ereignis gekoppelt.

3. Verwenden des Dienstes - Beide Controller können die Daten über den gemeinsamen Dienst freigeben, da es sich bei den Diensten um Singleton handelt.

Answer 2

Ein Ansatz ...

Sie einen monolithischen Controller verwenden:

<div data-ng-controller="mainCTRL"> 
    <div data-ng-controller="productCTRL"> 
     <span ng-model="basket | count"></span> 
     ....Some HTML Code...... 
    </div> 
    <div data-ng-controller="AuthController"> 
     ....Some HTML Code... 
    </div> 
    <div data-ng-controller="productCTRL"> 
     <ul ng-repeat="product in products"> 
      <li>{{product.title}}</li> 
     </ul> 
    </div> 
</div> 

Dann, wenn Sie den $http Anruf in mainCTRL statt productCTRL machen, wird es nur einmal ausgeführt wenn die Ansicht gerendert wird. Sie könnten dann auf die Daten zugreifen, die in mainCTRL von productCTRL über Gültigkeitsbereichvererbung gehalten werden.

Ein anderer Ansatz ...

Sie könnten den $http Aufruf zu einem Winkel Service oder Fabrik bewegen. Da es sich um Singletons handelt, wird immer nur eine Instanz existieren und das bedeutet, dass nur ein Aufruf erfolgt, wenn die App zum ersten Mal geladen wird. Sie würden dann die zurückgegebenen Daten lokal im Service speichern und öffentlich verfügbar machen.

Hier ist eine einfache Implementierung als Fabrik:

appController("productCTRL", function(productService){ 
    $scope.products = productService.products; 
}); 

Der Controller wird nach wie vor:

app.factory("productService", function($http){ 

    var products = []; 

    $http.get("api/products/get-products").then(function(response){ 
    products = response.data; 
    }); 

    return { 
    products: products 
    } 
}); 

Wenn Sie die Fabrik in Ihre productCTRL injizieren es einen direkten Zugang zum products Daten haben instanziiert zweimal, aber es wird nur die Variable $scope.products neu zuweisen. Am wichtigsten ist, dass es keinen redundanten Aufruf über HTTP an Ihre API mehr durchführt.