AngularJS 컨트롤러 간에 데이터를 효율적으로 전달하려면 어떻게 해야 합니까?

AngularJS에서 컨트롤러 간 데이터 전달

AngularJS에서 컨트롤러 간 데이터 전달은 일반적인 작업이며 이를 수행하는 방법에는 여러 가지가 있습니다. 그것. 이 기사에서는 서비스를 사용하여 ProductController에서 CartController로 데이터를 전달하는 방법에 대해 설명합니다.

서비스 구현

먼저 서비스를 정의하겠습니다. 제품 목록을 관리할 productService라고 합니다. 이 서비스에는 addProduct 및 getProducts라는 두 가지 기능이 포함됩니다. addProduct는 목록에 새 제품을 추가하고 getProducts는 전체 목록을 반환합니다.

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

컨트롤러 구현

다음으로 productService를 ProductController와 CartController를 모두 정의합니다.

ProductController에서 다음과 같은 함수를 정의합니다. productService에서 관리하는 목록에 선택한 제품을 추가하는 callToAddToProductList.

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

CartController에서 getProducts 함수를 사용하여 productService에서 제품 목록을 검색하고 이를 $scope에 할당합니다. .products 변수.

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

DOM 업데이트

CartController의 제품 목록이 하드코딩되어 있으므로 새 제품이 추가되면 DOM을 수동으로 업데이트해야 합니다. 이를 수행하는 한 가지 방법은 $watch 기능을 사용하여 $scope.products 변수의 변경 사항을 감시하고 그에 따라 DOM을 업데이트하는 것입니다.

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

서비스를 사용하여 제품 목록을 관리하고 제품 간 통신을 수행합니다. 두 컨트롤러 간에 쉽게 데이터를 전달하고 이에 따라 DOM을 업데이트할 수 있습니다.

위 내용은 AngularJS 컨트롤러 간에 데이터를 효율적으로 전달하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!