I'm using plain controller to make cart system and $ngcookies. Everything works but the only thing that My Data (.name) only displayed at cart after browser refresh/reload, to be honest main HTML and Cart.html in different controller/view ($ngroute). Is there any mistake i made to fix this? Any help will be appreciated.
I want my data displayed (live) on click instead of after Refresh
HTML
<div ng-controller="AliceController" class="talent-container">
<div ng-repeat="talent in talents">
<button type="button" href="#" ng-click="addItemToCart(talent)"></button>
<div id="name">{{talent.name}}</div>
</div>
</div>
cart.html
<div>
<ul class="userset" ng-show="cart.length !== 0">
<li ng-repeat="c in cart">
<h6>{{c.name}}</h6>
</li>
</ul>
</div>
Module
var alice = angular
.module('alice', ['ngRoute', 'angular-carousel', 'ngTouch', 'angular-carousel.shifty', 'ngCookies'])
Controller
.controller('AliceController', ['$scope', '$http', '$location', '$cookies', function ($scope, $http, $location, $cookies) {
$http.get('api.php').
then(function (res) {
$scope.talents = res.data.talents;
// cart
$scope.cart = [];
$scope.total = 0;
if (!angular.isUndefined($cookies.get('total'))) {
$scope.total = parseFloat($cookies.get('total'));
}
//Sepetimiz daha önceden tanımlıysa onu çekelim
if (!angular.isUndefined($cookies.get('cart'))) {
$scope.cart = $cookies.getObject('cart');
}
$scope.addItemToCart = function (talent) {
if ($scope.cart.length === 0) {
talent.count = 1;
$scope.cart.push(talent);
} else {
var repeat = false;
for (var i = 0; i < $scope.cart.length; i++) {
if ($scope.cart[i].id === talent.id) {
repeat = true;
$scope.cart[i].count += 1;
}
}
if (!repeat) {
talent.count = 1;
$scope.cart.push(talent);
}
}
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.putObject('cart', $scope.cart, {
'expires': expireDate
});
$scope.cart = $cookies.getObject('cart');
$cookies.put('total', $scope.total, {
'expires': expireDate
});
};
$cookies.put('total', $scope.total, {
'expires': expireDate
});
};
});
index.php
<body ng-app="alice">
<div ng-view></div> <!-- Goes to main.html using route-->
</body>
Header.html
<div ng-include src="'view/cart.html'">
Turns out the solution was combining the cart markup to the same page with the controller, thanks to Ronit Mukherjee for the concern and the inspiration.
Complete Html code