刷新后使用 ng-click 在 html 中显示会话

Question

我使用express-session 来保存产品价格。一切似乎都很好，但我在 html 中显示会话有问题。例如，如果我在会话中有 2 个产品，我添加下一个徽章将显示 3，当我刷新页面时，徽章是隐藏的，下一个添加下一个产品徽章将显示 4。如果我尝试像{{ session.cart.totalQty }} 这样的显示会话，这将不起作用。 main是controllerAs，cart是添加产品、统计总价等功能，User.addToCart(...)是返回$http的服务函数。问题是即使刷新页面如何显示会话totalQty？

html

<sapn class="badge">{{totalQty}}</span>
<a data-target="#" ng-click="main.addCart(price)" class="btn btn-success btn-block">Add to cart</a>

控制器

app.addCart = function(product){
    User.addToCart($routeParams.id).then(function(data){ 
        $scope.totalQty = data.data.cart.totalQty;
    });
}

和 API

router.get('/add-to-cart/:id', function(req, res){
    var cart = new Cart(req.session.cart ? req.session.cart : {});
    Product.findById({ _id : req.params.id }, function(err, product){ 
        if(err) throw err
        if(!product){
            res.json({success:false, message: 'err'});
        } else {

            cart.add(product, product.id);
            req.session.cart = cart;
            res.json({ success:true, product: product, cart:cart });

        }
    })  

});

Answer 1

您可以在从服务器加载之前使用localStorage 存储徽章计数。

类似：

User.addToCart($routeParams.id).then(function(data){ 
    $scope.totalQty = data.data.cart.totalQty;
    localStorage.totalQty = $scope.totalQty;
});

当您加载控制器时，只需调用：

$scope.totalQty = localStorage.totalQty || 0;

---

我建议您检查angular-local-storage 模块，该模块将通过角度方式管理localStorage。