# Shopping cart simulator

I have tried to simulate a cart (only partially completed). I just wanted to see how the code upto this point can be enhanced. I am trying to learn about the usage of directives.

Here I have used 2 directives:

1. msgpallette- to show the messages when something is added to the cart
2. item-container - to show each item in menu

A demo of the same is provided at plunkr

Do tell me whether I have used directives properly. If not, do suggest code changes with explanations.

HTML

<body ng-controller="MainCtrl">
<div id="msger">
<msgpallete msg="message" ng-show='show'>{{message}}
</msgpallete>
</div>
<p ng-repeat = "item in items">
<item-container
startcounter = 1
resetter     = 'reset'
name         = {{item.name}} >
{{item.name}}
</item-container><br><br>
</p>
<p ng-repeat = "order in orders">
<order-container >
{{order.name}}
</order-container><br><br>
</p>
</body>


JS

angular.module('myApp',[])
.controller('MainCtrl', function($scope,$timeout) {
$scope.items = [ {'name':'kabab'}, {'name':'noodles'}, {'name':'chicken'}, {'name':'egg'} ]$scope.resettrigger = function () {
$scope.reset = true;$timeout(function() {
$scope.reset = false; },100) }$scope.show=0;
$scope.addMsg = function (qty,item) {$timeout.cancel($scope.promise);$scope.show = true;
msg = "Added "+qty+" "+item+" to the cart";
$scope.message = msg;$scope.promise = $timeout(function() {$scope.show = false;
},3000)

}})
.directive('msgpallete',function(){
return{

restrict:"E",
transclude:true,
scope:{},
template:"<h4 ng-transclude ></h4>"
}
})

.directive('itemContainer',function(){
return {
controller: function() {return {}},
restrict:'E',
scope:{

resetter:"="
},
transclude:true,

scope.qty = attr.startcounter

scope.qty++;
}
scope.remove = function(){
scope.qty--;
}
scope.reset = function(){
console.log("attr.item:"+attr.name);
scope.$parent.addOrder(attr.name) scope.$parent.addMsg(scope.qty,attr.name)
console.log("value when submitted:" + scope.qty + "name:"+ attr.name);
scope.qty = attr.startcounter;
scope.$parent.resettrigger(); } scope.$watch(function(attr){
return attr.resetter
},
function(newValue){
if(newValue === true){
scope.qty = attr.startcounter;
}
});

},
"<button ng-click='remove();' >-</button>&nbsp"+
"{{qty}}&nbsp" +
"<a ng-transclude> </a>"

}
});


Don't have time for a full review but hopefully this will give you some food for thought.

Why add an extra variable show? Angular is more than capable of binding to an expression:

ng-show='message != ""'


Then you have one less thing to juggle in your controller:

$scope.addMsg = function (qty, item) {$scope.message = "Added " + qty + " " + item + " to the cart";
// console.log($scope.message); // if you want to debug$timeout(function() {
\$scope.message = "";
},3000);
}


• Add some spacing between operators e.g. a + b + c + d is easier to read than a+b+c+d
• addCartMessage is probably more descriptive than addMsg

msgpallete should be killed with fire
itemContainer seems like a good candidate but execution isn't great (will come back to this if I get time)
By removing the msgpallete directive you can change your view to:
<div id="msger">