Heim > Web-Frontend > js-Tutorial > Wie teile ich Daten zwischen Controllern in AngularJS mithilfe eines Dienstes?

Wie teile ich Daten zwischen Controllern in AngularJS mithilfe eines Dienstes?

Linda Hamilton
Freigeben: 2024-12-06 12:58:16
Original
301 Leute haben es durchsucht

How to Share Data Between Controllers in AngularJS Using a Service?

Datenübertragung zwischen Controllern in AngularJS

Im Bereich von AngularJS ist die Notwendigkeit, Daten zwischen Controllern auszutauschen, für die Erstellung anspruchsvoller Anwendungen von größter Bedeutung. Lassen Sie uns untersuchen, wie Sie dies mithilfe eines Dienstes erreichen können.

In Ihrem Szenario, in dem Sie ausgewählte Produkte zu einem Warenkorb hinzufügen möchten, können Sie einen Dienst als Vermittler nutzen.

Erstellen des Produktdienstes Factory

Initialisieren Sie eine Service-Factory mit der Factory-Funktion von AngularJS:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };
});
Nach dem Login kopieren

Injizieren des Service in Controller

Fügen Sie den productService sowohl in den ProductController als auch in den CartController ein:

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

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

Wenn Sie nun auf ein Produkt in Ihrem ProductController klicken, rufen Sie die addProduct-Funktion des productService auf, um die Produktliste zu füllen . Der CartController hat immer Zugriff auf die neueste im Dienst gespeicherte Produktliste.

Das obige ist der detaillierte Inhalt vonWie teile ich Daten zwischen Controllern in AngularJS mithilfe eines Dienstes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage