Local Scope Property & - Pass parameter 1

using an object literal

by Michael Hunziker

HTML

<script src="//code.angularjs.org/1.3.1/angular.js"></script>
<body ng-app='myShop'>
    <div ng-controller="ShoppingCartController">
      <shopping-cart item="item" increase="increase(count)"></shopping-cart>
    </div>
  </body>

JavaScript

angular.module('myShop', [])
    .controller('ShoppingCartController', ['$scope', function($scope) {
      $scope.item = { article: 'PS4', number: 0 };
      $scope.increase = function(count) {
        console.log(count);
        $scope.item.number += count;
      }
    }])
    .directive('shoppingCart', function() {
      return {
        restrict: 'E',
        scope: {
          item: '=',
          increase: '&'
        },
        controller: function($scope) {
          $scope.count = 0;
          $scope.increaseCounter = function() {
            console.log($scope.count);
            $scope.increase({count: $scope.count});
          };
        },
        template: '<div>Article: {{item.article}} Number: {{item.number}}</div>' +
                  '<input id="count" type="number" ng-model="count">' +
                   '<button ng-click="increaseCounter()">Increase number</button>'
        };
    });