title: Directive (nested inside a partial) throws “Termplate must have exactly one root element”
body: <p>I'm trying to follow angular best practice recommendation and use directives to
   encapsulate reusuable HTML elements.
  The error message:</p>
  
  <blockquote>
    <p>Error: Template must have exactly one root element. was: partials/user/path/to/somedata.html</p>
  </blockquote>
  
  <p>the directive code:</p>
  
  <pre><code>.directive('stDirectivename', function() {
      return {
          restrict: 'E',
          replace: true,
          // transclude: false,
          template: 'partials/user/path/to/somedata.html'
      };
  })
  </code></pre>
  
  <p>And the template: </p>
  
  <pre><code>&lt;div ng-show="person.condition" class="someclass"&gt;
      &lt;span class = "personRoi"&gt;
          &lt;i class="anotherclass " ng-class="{'specialclass1': person.count&gt;=0,'specialclass2':person.count&lt;0}"&gt;
  
          &lt;/i&gt;{{person.somedata}}%
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Called in the partial (which is the template of a modal) as:<br>
  <code>&lt;st-directivename&gt;&lt;/st-directivename&gt;</code></p>
  
  <p>when I replace the template url for a simple html string in the directive. Everything works. Unfortunately I can't do that for the real template that involves both <code>'</code> and<code>“</code>. besides this solution won't scale to the larger templates I plan to some directives.</p>
  
  <p>Also when I just insert the template html instead of the directive tag, everything works correctly (I'm actually extracting the code from the existing html to make it reusable).</p>
  
  <p>I read in other SO questions that this has to do with having extra space/tags/comments in the template. But I just can't find such elements.</p>
  
  <p>Does anybody know a solution for this? I'll be glad for any help.</p>