6
\$\begingroup\$

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,
    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:"<button ng-click='reset();'>Add to cart</button>&nbsp&nbsp"+            
         "<button ng-click='remove();' >-</button>&nbsp"+
                 "{{qty}}&nbsp" +
                 "<button ng-click='add();'>+</button>&nbsp&nbsp"+
         "<a ng-transclude> </a>"


    }
});
\$\endgroup\$
0

1 Answer 1

Reset to default
3
\$\begingroup\$

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:

<div id="msger">
    <h4 ng-show='message != ""'>{{message}}</h4>
</div>

(Your controller will be unchanged).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.