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

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

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>

我的疑问是，如何将点击的产品从第一个控制器传递到第二个控制器?我认为cart也应该是一个控制器。

我处理点击事件使用指令。我也觉得我应该使用服务来实现上述功能，只是不明白如何?因为购物车将被预定义的产品数量添加可能是5/10取决于哪个页面的用户。所以我想保持它的一般性。

更新:

我创建了一个广播服务，在第二个控制器我接收它。现在的问题是如何更新dom?因为我的产品清单是硬编码的。

当前回答

从描述来看，似乎您应该使用服务。查看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();
});

2013-11-24 21:54:58

其他回答

我们可以在会话中存储数据，并可以在程序的任何地方使用它。

$window.sessionStorage.setItem("Mydata",data);

其他地方

$scope.data = $window.sessionStorage.getItem("Mydata");

2016-10-04 12:42:32

我认为最好的方法是使用$localStorage。(一直工作)

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

你的cardController将是

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

您还可以添加

if($localStorage.selectedObj){
    $scope.selectedProducts = $localStorage.selectedObj;
}else{
    //redirect to select product using $location.url('/select-product')
}

2017-07-28 07:19:22

如何通过这个点击产品从第一个控制器到第二个?

点击你可以调用调用广播的方法:

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

第二个控制器会监听这个标签，像这样:

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

因为我们不能将$scope注入到服务中，所以没有什么东西可以像单一的$scope一样。

但我们可以注入$rootScope。因此，如果您将值存储到服务中，您可以运行$rootScope。$broadcast('SOME_TAG'， '你的值');在服务主体中。(参见@Charx服务描述)

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

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

2013-11-24 21:42:44

我不知道它是否会帮助任何人，但基于Charx(谢谢!)的回答，我创建了简单的缓存服务。请随意使用、混音和分享:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

2016-10-03 19:09:12