我有一个显示产品的基本控制器，
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?因为我的产品清单是硬编码的。
我认为最好的方法是使用$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')
}
使用angular service的一种方法是:
var app = angular.module("home", []);
app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});
app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});
app.factory('ser1', function(){
return {o: ''};
});
<div ng-app='home'>
<div ng-controller='one'>
Type in text:
<input type='text' ng-model="inputText.o"/>
</div>
<br />
<div ng-controller='two'>
Type in text:
<input type='text' ng-model="inputTextTwo.o"/>
</div>
</div>
https://jsfiddle.net/1w64222q/
1
using $localStorage
app.controller('ProductController', function($scope, $localStorage) {
$scope.setSelectedProduct = function(selectedObj){
$localStorage.selectedObj= selectedObj;
};
});
app.controller('CartController', function($scope,$localStorage) {
$scope.selectedProducts = $localStorage.selectedObj;
$localStorage.$reset();//to remove
});
2
点击你可以调用调用广播的方法:
$rootScope.$broadcast('SOME_TAG', 'your value');
and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
// ....
})
3
using $rootScope:
4
window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");
5
使用angular service的一种方法是:
var app = angular.module("home", []);
app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});
app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});
app.factory('ser1', function(){
return {o: ''};
});
我已经创建了一个工厂来控制路由路径模式之间的共享作用域，因此您可以在用户在相同的路由父路径中导航时维护共享数据。
.controller('CadastroController', ['$scope', 'RouteSharedScope',
function($scope, routeSharedScope) {
var customerScope = routeSharedScope.scopeFor('/Customer');
//var indexScope = routeSharedScope.scopeFor('/');
}
])
因此，如果用户转到另一个路由路径，例如'/Support'，路径'/Customer'的共享数据将被自动销毁。但是，如果用户去到“子”路径，比如“/Customer/1”或“/Customer/list”，作用域不会被销毁。
您可以在这里看到一个示例:http://plnkr.co/edit/OL8of9
