title: Pass Service to a Directive
body: <p>How can I pass a Service to a Directive ?</p>
  
  <p>I want that for each char typed on a text box, I call my service.</p>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>function campoPesquisa() {
          return {
              restrict: 'E',
              template: "&lt;input style='border: none; border-color: transparent; display:none; width: 70%;' type='text' id='txtSearch' placeholder='Search...' /&gt;",
              link: function ($scope, $element, $attrs) {
                  $element.on("keypress", function () {
  
                  });
              }
          }
      }
  
  angular
      .module('app')
      .directive('sisloccampopesquisa', campoPesquisa);
  </code></pre>
  
  <p><strong>In another File</strong></p>
  
  <pre><code>    function comWebApi_Service() {
          // do something here
      }
  
      angular
          .module('app')
          .service('apiService', comWebApi_Service);
  </code></pre>
  
  <p>So, I'm using the directive under a controller</p>
  
  <pre><code>&lt;div ng-controller="crmContatosCtrl"&gt;
     &lt;sisloccampopesquisa&gt;&lt;/sisloccampopesquisa&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Controller crmContatosCtrl</strong></p>
  
  <pre><code>function crmContatosCtrl($scope, apiService) { 
      // some stuff's here
  }
  
  angular
      .module('app')
      .controller('crmContatosCtrl', crmContatosCtrl);
  </code></pre>