我有一个显示产品的基本控制器，
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?因为我的产品清单是硬编码的。
我在这里看到了答案，它回答了控制器之间共享数据的问题，但是如果我想让一个控制器通知另一个控制器数据已经更改的事实(不使用广播)，我应该怎么做?简单!使用著名的访客模式:
myApp.service('myService', function() {
var visitors = [];
var registerVisitor = function (visitor) {
visitors.push(visitor);
}
var notifyAll = function() {
for (var index = 0; index < visitors.length; ++index)
visitors[index].visit();
}
var myData = ["some", "list", "of", "data"];
var setData = function (newData) {
myData = newData;
notifyAll();
}
var getData = function () {
return myData;
}
return {
registerVisitor: registerVisitor,
setData: setData,
getData: getData
};
}
myApp.controller('firstController', ['$scope', 'myService',
function firstController($scope, myService) {
var setData = function (data) {
myService.setData(data);
}
}
]);
myApp.controller('secondController', ['$scope', 'myService',
function secondController($scope, myService) {
myService.registerVisitor(this);
this.visit = function () {
$scope.data = myService.getData();
}
$scope.data = myService.getData();
}
]);
通过这种简单的方式，一个控制器可以向另一个控制器更新一些数据。
从描述来看，似乎您应该使用服务。查看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();
});
不创建服务的解决方案，使用$rootScope:
要跨应用控制器共享属性，你可以使用Angular $rootScope。这是共享数据的另一种选择，让人们知道它。
在控制器之间共享一些功能的首选方式是服务，读取或更改全局属性可以使用$rootscope。
var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showBanner = true;
}]);
app.controller('Ctrl2', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showBanner = false;
}]);
在模板中使用$rootScope(使用$root访问属性):
<div ng-controller="Ctrl1">
<div class="banner" ng-show="$root.showBanner"> </div>
</div>
