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

17 浏览
0 Comments

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

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

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

在我的视图中，我在列表中显示这些产品

    • {{product.name}}

</ul

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

    • //click one added here

 

    • //click two added here

 

 

因此，我的疑问是，如何将第一个控制器中的已单击产品传递给第二个控制器？我认为购物车也应该是一个控制器。

我使用指令处理点击事件。我也觉得应该使用服务来实现上述功能，但我不能确定如何做。因为购物车将是预定义的数量，例如用户所在的页面，可以添加5/10个产品。因此，我想保持这个通用性。

更新：

我创建了一个广播服务，在第二个控制器中接收它。现在的问题是如何更新DOM？因为我的列表中删除产品的部分相当硬编码。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

如何将从第一个controller中点击的产品传递给第二个controller？

在点击时，您可以调用调用 broadcast 的方法：

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

第二个controller将监听此标记，如下所示：

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

由于我们不能将 $scope注入到服务中，因此没有像单例 $scope 的东西。

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

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

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

0
0 Comments

从描述来看，你应该使用一个服务。查看 http://egghead.io/lessons/angularjs-sharing-data-between-controllers 和 AngularJS Service Passing Data Between Controllers 来查看一些示例。

你可以将你的产品服务（作为工厂）定义为如下：

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();
});

0