title: AngularJS directives, templates and ng-include
body: <p>So I am trying to create a directive that has an <strong>ng-include</strong> in it.
  The directive currently looks like this:</p>
  
  <pre><code>.directive('kdTest', function () {
      return {
          restrict: 'A',
          scope: {
              kit: '=kdTest',
              garment: '=kdGarment'
          },
          template: '&lt;div&gt;&lt;/div&gt;',
          link: function (scope, element, attrs) {
              console.log(scope.kit);
              console.log(scope.garment);
          }
      }
  });
  </code></pre>
  
  <p>what I want to do is change the template to look more like this:</p>
  
  <pre><code>.directive('kdTest', function () {
      return {
          restrict: 'A',
          scope: {
              kit: '=kdTest',
              garment: '=kdGarment'
          },
          template: '&lt;div ng-include="'/assets/garments/' + garment.slug + '.svg'"&gt;&lt;/div&gt;',
          link: function (scope, element, attrs) {
              console.log(scope.kit);
              console.log(scope.garment);
          }
      }
  });
  </code></pre>
  
  <p>but as you can see, the single quotes are going to cause me problems.
  Can someone help me fix that?</p>
  
  <p>Also, I need to be able to access the <strong>svg</strong> element from inside the directive.</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>So, I have changed my directive to this:</p>
  
  <pre><code>.directive('kdTest', function () {
      var colours,
          design,
          garment;
  
      // Function to show our selected design
      var showDesign = function (element) {
  
          // Get our image
          var svg = element.find('svg');
  
          console.log(svg.length);
  
          // If we have an image
          if (svg.length) {
  
              ///-- removed for brevity --//
          }
      };
  
      return {
          restrict: 'A',
          scope: {
              kit: '=kdTest',
              garment: '=kdGarment'
          },
          template: '&lt;div ng-include="svgPath"&gt;&lt;/div&gt;',
          link: function (scope, element, attrs) {
  
              // Attach our scope to our global variables
              colours = scope.colours;
              design = scope.design;
              garment = scope.garment;
  
              // Create our svgPath
              scope.svgPath = 'assets/garments/' + scope.garment.slug + '.svg';
  
              // Show our selected design
              showDesign(element);
          }
      }
  });
  </code></pre>
  
  <p>So in my function <strong>showDesign</strong> the console.log(svg.length) returns 0.
  How can I get it to actually see the svg?</p>