Code snippet after angularjs directive is trimmed

Question

I've created an angularjs element directive which outputs a textarea. I've embedded this into a parent view, and directly underneath this element, I've added a snippet of html. For some reason, this snippet doesn't get rendered. Any ideas why?

<div style="position: relative">
    <div>TEST:</div>            
    <ng-my-directive />
    <span>TEST2</span> 
</div> 

app.directive('ngMyDirective', function() {
    return {
        restrict : 'E',
        templateUrl : 'mytemplate.html',
        controller : 'MyController'
    }
});

<!-- my template -->
<textarea rows="10"></textarea>

<!-- rendered verson is missing span -->
<div style="position: relative">
    <div>NOTES:</div>           
    <ng-my-template class="ng-isolate-scope">
       <textarea rows="10" class="ng-pristine ng-valid"></textarea>
    </ng-my-template>
</div>

Answer 1

Self-closing elements as the HTML specification defines them are very special to the browser parser. You can't make your own, so for your custom elements you have to stick to non-void elements

Try with:

<div style="position: relative">
    <div>TEST:</div>
    <ng-my-directive></ng-my-directive>
    <span>TEST2</span> 
</div>