AngularJS - html under my directive is not showing

Question

Please see relevant jsFiddle

Within this file I have two spans \'test1\' and \'test2\'. The span \'test2\' is showing but the span underneath my custom directive \'t

Answer 1

As you are doing <search-bar/> that means you are considering the directive element tag as a self-closing tag. Custom html elements are not self-closing by nature, so you should close the element of your directive like <search-bar> </search-bar>

Currently your <span>test1</span> is disappearing because you have not closed you directive element, so the browser does close that element by itself where its parent element gets closed like here div with ng-controller is parent

Before Rendering

<div ng-controller="MyCtrl">
    <search-bar/> <!-- The Search Bar Directive -->
    <span>test1</span>
</div>

After Rendering

<div ng-controller="MyCtrl">
    <search-bar></search-bar>
</div>

There after the directive start its working on the element & replace the directive element with the input element.

Here are list of self closing html tags

Working Fiddle

Answer 2

you cant use in angular ... its just not valid. You must close directive, with close tag

<div ng-app="HelloApp">
    <div ng-controller="MyCtrl">
        <search-bar> </search-bar><!-- The Search Bar Directive -->
        <span>test1</span>
    </div>
    <span>test2</span>
</div>