在Angular JS中的控制器之间传递数据？

javascript angularjs angular-services

2022-08-30 00:37:03

我有一个显示我的产品的基本控制器，

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

在我看来，我在列表中显示此产品

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

我试图做的是，当有人点击产品名称时，我有另一个名为购物车的视图，其中添加了此产品。

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

所以我在这里的疑问是，如何将这个点击的产品从第一个控制器传递到第二个控制器？我以为购物车也应该是一个控制器。

我使用指令处理单击事件。另外我觉得我应该使用服务来实现上述功能只是无法弄清楚如何？因为购物车将预定义添加的产品数量可能是5/10，具体取决于用户所在的页面。所以我想保持这个通用性。

更新：

我创建了一个广播服务，并在第二个控制器中接收它。现在查询的是我如何更新dom？由于我的列表删除产品是相当硬编码的。

答案 1

从描述中可以看出，似乎您应该使用服务。查看 http://egghead.io/lessons/angularjs-sharing-data-between-controllers 和AngularJS服务在控制器之间传递数据以查看一些示例。

您可以将产品服务（作为工厂）定义为：

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

依赖关系将服务注入到两个控制器中。

在中，定义将所选对象添加到数组中的某个操作：ProductController

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

在您的中，从服务中获取产品：CartController

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

答案 2

如何将这个点击的产品从第一个控制器传递到第二个控制器？

单击时，您可以调用调用广播的方法：

$rootScope.$broadcast('SOME_TAG', 'your value');

第二个控制器将侦听此标记，如下所示：

$scope.$on('SOME_TAG', function(response) {
      // ....
})

由于我们无法将$scope注入到服务中，因此没有什么比单例$scope。

但是我们可以注入.因此，如果将值存储到服务中，则可以在服务正文中运行。（请参阅有关服务@Charx说明）$rootScope$rootScope.$broadcast('SOME_TAG', 'your value');

app.service('productService',  function($rootScope) {/*....*/}

请查看有关$broadcast的好文章，$emit