如何在 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 中，我们将定义一个名为 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。一种方法是使用 $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中文网其他相关文章！