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



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


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:"&lt;h4 ng-transclude &gt;&lt;/h4&gt;"
}
})

.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){
            return attr.resetter
        },
        function(newValue){
            if(newValue === true){
                scope.qty = attr.startcounter;
            }
        });


    },
    template:"&lt;button ng-click='reset();'&gt;Add to cart&lt;/button&gt;&amp;nbsp&amp;nbsp"+            
         "&lt;button ng-click='remove();' &gt;-&lt;/button&gt;&amp;nbsp"+
                 "{{qty}}&amp;nbsp" +
                 "&lt;button ng-click='add();'&gt;+&lt;/button&gt;&amp;nbsp&amp;nbsp"+
         "&lt;a ng-transclude&gt; &lt;/a&gt;"


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

&lt;div id="msger"&gt;
    &lt;h4 ng-show='message != ""'&gt;{{message}}&lt;/h4&gt;
&lt;/div&gt;


(Your controller will be unchanged).