Comment puis-je transmettre efficacement des données entre les contrôleurs AngularJS ?

Transmission de données entre contrôleurs dans AngularJS

La transmission de données entre contrôleurs dans AngularJS est une tâche courante, et il existe plusieurs façons de le faire il. Dans cet article, nous aborderons l'utilisation d'un service pour transmettre des données du ProductController au CartController.

Implémentation du service

Pour commencer, nous définirons un service appelé productService qui gérera notre liste de produits. Ce service contiendra deux fonctions : addProduct et getProducts. addProduct ajoutera un nouveau produit à la liste et getProducts renverra la liste entière.

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Implémentation du contrôleur

Ensuite, nous injecterons le productService dans à la fois notre ProductController et CartController.

Dans ProductController, nous définirons une fonction appelée callToAddToProductList qui ajoutera le produit sélectionné dans la liste gérée par productService.

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

Dans le CartController, nous utiliserons la fonction getProducts pour récupérer la liste de produits du productService et l'attribuer à la variable $scope.products.

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

Mise à jour DOM

Puisque votre liste de produits dans le CartController est codé en dur, vous devrez mettre à jour le DOM manuellement lorsqu'un nouveau produit est ajouté. Une façon de procéder consiste à utiliser la fonction $watch pour surveiller les modifications apportées à la variable $scope.products et mettre à jour le DOM en conséquence.

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);
});

En utilisant un service pour gérer la liste de produits et communiquer entre les deux contrôleurs, vous pouvez facilement transmettre des données entre eux et mettre à jour le DOM en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!