Wie kann ich Daten effizient zwischen AngularJS-Controllern übergeben?

Übergabe von Daten zwischen Controllern in AngularJS

Die Übergabe von Daten zwischen Controllern in AngularJS ist eine häufige Aufgabe, und es gibt verschiedene Möglichkeiten, dies zu tun Es. In diesem Artikel besprechen wir die Verwendung eines Dienstes zum Übergeben von Daten vom ProductController an den CartController.

Dienstimplementierung

Zunächst definieren wir einen Dienst namens „productService“, der unsere Produktliste verwaltet. Dieser Dienst enthält zwei Funktionen: addProduct und getProducts. addProduct fügt der Liste ein neues Produkt hinzu und getProducts gibt die gesamte Liste zurück.

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Controller-Implementierung

Als nächstes fügen wir den ProductService ein Sowohl unser ProductController als auch unser CartController.

Im ProductController definieren wir eine Funktion namens callToAddToProductList, die die ausgewählten hinzufügt Produkt in die vom ProductService verwaltete Liste einfügen.

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

Im CartController verwenden wir die Funktion getProducts, um die Produktliste vom ProductService abzurufen und sie der Variablen $scope.products zuzuweisen.

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

DOM-Update

Da Ihre Produktliste im CartController fest codiert ist, müssen Sie dies tun Aktualisieren Sie das DOM manuell, wenn ein neues Produkt hinzugefügt wird. Eine Möglichkeit, dies zu tun, besteht darin, die Funktion $watch zu verwenden, um auf Änderungen an der Variablen $scope.products zu achten und das DOM entsprechend zu aktualisieren.

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();

    $scope.$watch('products', function(newValue, oldValue) {
        // Update the DOM here based on the new value of products
    }, true);
});

Durch die Verwendung eines Dienstes zur Verwaltung der Produktliste und zur Kommunikation zwischen ihnen Wenn Sie die beiden Controller miteinander verbinden, können Sie ganz einfach Daten zwischen ihnen austauschen und das DOM entsprechend aktualisieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Daten effizient zwischen AngularJS-Controllern übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!