Archives

Archives / 2014 / February

  • AngularJS–don’t use self-closing div tags

    No Comments

    I had a piece of code that gave strange results in AngularJS. The issue was that I used a self closing <div /> tag instead of <div>…</div>. Self closing div tags are not supported in HTML5. The complete code can be found at http://stackoverflow.com/questions/21552560/angularjs-bug-in-ng-include-when-not-using-jquery and the plunker http://plnkr.co/edit/O3NSb2VEwAEDrkmtoKZ6?p=preview.

    My wrong code was written as:

    <script id="paragraphTmpl.html" type="text/ng-template">
    <h4>{{paragraph.Title}}</h4>
    <!-- comment line below to have the paragraphs render correctly --> 
    <div ng-bind-html="trustAsHtml(paragraph.Content)"/>
    <ng-include ng-repeat="paragraph in paragraph.Paragraphs" 
                src="'paragraphTmpl.html'">
</script>

    <div>
<h3>{{chaptercontent.Title}}</h3>
    

    &lt;div ng-bind-html=&quot;trustAsHtml(chaptercontent.Content)&quot;/&gt;
&lt;ng-include ng-repeat=&quot;paragraph in chaptercontent.Paragraphs&quot; 
            src=&quot;'paragraphTmpl.html'&quot;/&gt;

    

    </div>

    It works fine when jQuery is included, but not when you use the AngularJS JQLite implementation.
    When <div ng-bind-html="trustAsHtml(chaptercontent.Content)"></div> is used, the code works correctly.