Angularjs directive removes all content from parent div

Question

I have custom directive declaration with replace set to true.

When I place it in html with separate close tag:

<div>
    <search-box search="search(query)" query="query" ></search-box>
    <div class="dataDiv">
        <!--other div elements -->
    </div>
</div>

everything works as expected.

But after rewriting html in this way:

<div>
    <search-box search="search(query)" query="query" />
    <div class="dataDiv">
        <!--other div elements -->
    </div>
</div>

directive completely replaces all parent div content with it's template and removes dataDiv from resulting html page.

Is this expected angular behavior or something that can be changed in directive declaration?

Directive:

function SearchBox() {
    return {
        restrict: 'E',
        replace: true,
        template: '...',
        scope: {
            query: '='
        },
        link: function($scope, $element){
            ...
        },
        controller: function ($scope) {
            ...
        }
    }
}

That's expected behaviour, **replace: true** replaces the directive contents template or if html from templateUrl.. — Vishal Khode, Apr 24 '14 at 15:36

score 2 · Accepted Answer · edited May 23 '17 at 12:11

Depending on your doctype you might be giving the wrong meaning to the "closing" slash. by default, yeoman generator and angular-seed use <!doctype html> (html5)

In HTML 5, <foo /> means <foo>. The slash is just syntactic sugar Check this Are (non-void) self-closing tags valid in HTML5?

Depending on the browser implementation, it will add automatically a closing tag in one place or another, just like when you leave bodyor strong open and read the rendered code.

Angularjs directive removes all content from parent div

1 Answers1

Linked