Mat.Now
Mat.Now

Reputation: 1725

Display session in html using ng-click after refresh

I am using express-session where I am holding products prices. Everything seems works good, but I have problem with display session in html. For example if I have 2 products in session and I add next badge will show 3, when I refresh page badge is hide, and next add next product badge will show 4. And if I try display session like {{ session.cart.totalQty }} this doesn't work. main is controllerAs, cart is function which adding products, counting total price etc and User.addToCart(...) is service function returning $http.Question is how to display session totalQty even if refresh page?

html

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

controller

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

and 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 });

        }
    })  

});

Upvotes: 1

Views: 40

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

You can use localStorage to store badge count before you load it from Server.

Something like:

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

And when you load your controller just call:

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

I suggest you to check angular-local-storage module that will manage localStorage by angular way.

Upvotes: 1

Related Questions