首页 >web前端 >js教程 >如何使用服务在 AngularJS 的控制器之间共享数据?

如何使用服务在 AngularJS 的控制器之间共享数据?

Linda Hamilton
Linda Hamilton原创
2024-12-06 12:58:16301浏览

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

AngularJS 中的控制器间数据传输

在 AngularJS 领域,控制器之间交换数据的需求对于构建复杂的应用程序至关重要。让我们探讨如何使用服务来实现此目的。

在您的场景中,如果您想要将选定的产品添加到购物车,您可以利用服务作为中介。

创建 ProductService Factory

使用AngularJS的工厂初始化一个服务工厂函数:

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中:

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

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

现在,当你点击一个产品时在 ProductController 中,调用 ProductService 的 addProduct 函数来填充 ProductList。 CartController 将始终可以访问服务中存储的最新产品列表。

以上是如何使用服务在 AngularJS 的控制器之间共享数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn