Directive Service Injection

by ganarajpr

HTML

<div ng-app='Componenent'>
  <div ng-controller="AppController">
      {{ title }}
      <hr />
      <counter></counter>
      <hr />
      Your count: {{ c.counter }}
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<style>

JavaScript

angular.module('CountModule', [])
    .factory('CountService', function () {
        return {
            counter: 0
        };
    });

angular.module('Componenent', ['CountModule'])
    .directive('counter', function () { 
        return { 
            restrict: 'E',
            transclude: true,
            scope: {
                label: 'evaluate'
            },
            controller: function ($scope, CountService) {
                $scope.c = CountService;
                $scope.increment = function() {
                    $scope.c.counter++;
                };
            },
            template: "<button ng-click='increment()'>{{ c.counter }}</button>",
            replace: true
        }; 
    });

function AppController($scope, CountService) {
  $scope.title = 'Amazing Counting Button';
  $scope.c = CountService;
}