在 Angular JS 中的控制器之间传递数据? [英] Passing data between controllers in Angular JS?

问题描述

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

I have a basic controller that displays my products,

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

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

In my view I'm displaying this products in a list

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

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

What I'm trying to do is when someone click on the product name, i have another view named cart where this product is added.

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

所以我的疑问是，如何将点击的产品从第一个控制器传递给第二个控制器?我认为购物车也应该是一个控制器.

So my doubt here is, how do pass this clicked products from first controller to second? i assumed that cart should be a controller too.

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

I handle click event using directive. Also i feel i should be using service to achieve above functionality just can't figure how? because cart will be predefined number of products added could be 5/10 depending on which page user is. So i would like to keep this generic.

更新:

我创建了一个广播服务，并在第二个控制器中接收它.现在查询是如何更新dom?因为我要删除的产品列表是硬编码的.

I created a service to broadcast and in the second controller i receive it. Now the query is how do i update dom? Since my list to drop product is pretty hardcoded.

推荐答案

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

From the description, seems as though you should be using a service. Check out http://egghead.io/lessons/angularjs-sharing-data-between-controllers and AngularJS Service Passing Data Between Controllers to see some examples.

您可以这样定义您的产品服务(作为工厂):

You could define your product service (as a factory) as such:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

依赖项将服务注入到两个控制器中.

Dependency inject the service into both controllers.

在您的 ProductController 中，定义一些将所选对象添加到数组的操作:

In your ProductController, define some action that adds the selected object to the array:

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

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

In your CartController, get the products from the service:

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

这篇关于在 Angular JS 中的控制器之间传递数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！