AngularJS コントローラー間でデータを効率的に渡すにはどうすればよいですか?

AngularJS のコントローラー間でのデータの受け渡し

AngularJS のコントローラー間でのデータの受け渡しは一般的なタスクであり、いくつかの異なる方法があります。それ。この記事では、サービスを使用して ProductController から CartController にデータを渡す方法について説明します。

サービスの実装

まず、サービスを定義します。製品リストを管理する productService と呼ばれます。このサービスには、addProduct と getProducts という 2 つの関数が含まれます。 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 では、という関数を定義します。 callToAddToProductList は、選択した製品を productService によって管理されるリストに追加します。

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 を手動で更新する必要があります。これを行う 1 つの方法は、$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);
});

サービスを使用して製品リストを管理し、製品リスト間で通信することにより、 2 つのコントローラーを使用すると、それらの間で簡単にデータを受け渡し、それに応じて DOM を更新できます。

以上がAngularJS コントローラー間でデータを効率的に渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。