我试图在Angular和Node中构建自己的购物车系统。我的控制器处理mongo数据库中的用户购物车和本地存储中的购物车(如果用户没有帐户)。现在,我已经为我的购物车控制器创建了一种从本地存储和数据库中删除购物车项目的方法。我的棱角分明看着这个物体。
$scope.lineItems
用于在物品上填充购物车。现在我可以成功获得更新的购物车,但我需要刷新我的页面。通过触发更新范围的功能来更新范围的最佳方法是什么?
代码:
if ( token ) {
var payload = authService.parseToken(token);
dataService.getCart(payload._id).then(function (resolve){
if (resolve.data){
$scope.lineItems = resolve.data;
$scope.deleteLineItem = function(lineitem){
dataService.deleteLineItem([lineitem.lineItemID, payload._id]);
}
}
}, function(reason){
console.log(reason);
});
} else {
if (dataService.retrieveLocal('localCart')){
$scope.lineItems = dataService.retrieveLocal('localCart');
$scope.deleteLineItem = function(lineitem){
var cart = dataService.retrieveLocal('localCart');
var updatedCart = cart.filter(function(item){
if (lineitem.lineItemID != item.lineItemID){
return item
}
})
dataService.storeToLocal('localCart', updatedCart);
}
}
}
答案 0 :(得分:0)
我强烈建议您不要因负载成本过高而使用AngularJS Watcher
,一般在您的应用中尽量减少您的观察者(计时器)。
此外,在您的情况下,您不需要使用watcher
,因为当您使用LocalStorage
时,无需再次在所有浏览器标签中刷新页面,实际上您的购物车项目只是在观看您的$localStorage.lineItems
而不是$ scope.lineItems,并且自$ localStorage.lineItems更新后,所有浏览器选项卡都将自动更新。
在一个选项卡中,您将触发基于点击事件等启动请求和服务器端处理,然后在响应中更新您的localStorage变量($localStorage.lineItems
),因此您的内容将始终更新。< / p>