我有一个显示我的产品的基本控制器,
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?由于我的删除产品列表是非常硬编码的。
从描述来看,似乎您应该使用一项服务。查看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中,定义一些将选定对象添加到数组的操作:
ProductController
app.controller('ProductController', function($scope, productService) { $scope.callToAddToProductList = function(currObj){ productService.addProduct(currObj); }; });
在您的CartController中,从服务中获取产品:
CartController
app.controller('CartController', function($scope, productService) { $scope.products = productService.getProducts(); });