title: Calling service method from a directive template
body: <p>Let's say I have a <strong>directive</strong>:</p>
  
  <pre><code>&lt;component&gt;
     &lt;img ng-src='{{something}}' /&gt;
  &lt;/component&gt;
  </code></pre>
  
  <p>defined as:</p>
  
  <pre><code>app.directive("component", function() {
      return {
          scope: {},
          restrict: 'E',
          transclude: true,
          template: "&lt;a href='' ng-click='MyService.doThings()' ng-transclude&gt;&lt;/a&gt;"
      }
  });
  </code></pre>
  
  <p>Despite all my efforts, I fail to understand how to accomplish two tasks:</p>
  
  <ol>
  <li>How do I access the inner image source path?</li>
  <li>How can I pass this path to service <code>MyService</code>? (think of a lightbox wrapper)</li>
  </ol>
  
  <p><strong>Update with solution:</strong></p>
  
  <pre><code>app.directive("component", function(LightboxService) {
      return {
          restrict: 'E',
          transclude: true,
          replace: true,
          template: "&lt;a href='' ng-click='lb()' ng-transclude&gt;&lt;/a&gt;",
          link: function (scope, element, attrs) {
              scope.lb = function () {
                  var src = $(element).find("img").attr("src");
                  LightboxService.show(src);
              }
          }
      }
  });
  </code></pre>