CODEWITHSUNDEEP
angularjstrimdirective
user1491636
user1491636

Reputation: 2446

Code snippet after angularjs directive is trimmed

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>

Upvotes: 0

Views: 125

Answers (1)

Peter Hedberg
Peter Hedberg

Reputation: 3659

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>

Upvotes: 1

Related Questions