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:

• msgpallette- to show the messages when something is added to the cart

• 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



{{message}}



{{item.name}}



{{order.name}}




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:""
}
})

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

resetter:"="
},
transclude:true,
link:function(scope,elem,attr){

scope.qty = attr.startcounter
scope.add = function(){

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

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

Some notes about code clarity:

• Don't forget your semicolons

• 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

As for your question about directives:

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:

    {{message}}

(Your controller will be unchanged).

StackExchange Code Review Q#87799, answer score: 3