.html() returns empty string

Question

I have the code:

        htmlObject = '<div status-box></div>';
        template = $compile(htmlObject)($scope);
        $scope.$digest();
        console.log(template);
        var templateAsHtml = template.html();
        console.log(templateAsHtml);

and the output: from the first console.log:

{0: <div status-box="" class="ng-scope"></div>, length: 1}

and from the second:

''

It seems like the moment I call .html it just not converting it and it is empty.

var templateAsHtml = template[0].outerHTML;, why?

Arun P Johny
– Arun P Johny

2016-02-19 10:58:15 +00:00
Commented Feb 19, 2016 at 10:58 — Arun P Johny
– Arun P Johny, Commented Feb 19, 2016 at 10:58
html() gets innerHtml so you have to use outer one

sertsedat
– sertsedat

2016-02-19 11:01:51 +00:00
Commented Feb 19, 2016 at 11:01 — sertsedat
– sertsedat, Commented Feb 19, 2016 at 11:01

Dropout · Accepted Answer · 2016-02-19 11:04:02Z

4

When you ask for .html() of an element you will get the innerHTML of it. Since '<div status-box></div>' has no child nodes the behavior is correct. If you want to return the HTML including the object itself you need to use outerHTML function.

var templateAsHtml = template[0].outerHTML;
console.log(templateAsHtml);

See docs:

Note: the [0] is used to access the vanilla JavaScript object inside of your wrapper object.

answered Feb 19, 2016 at 11:04

Dropout

14k10 gold badges59 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

.html() returns empty string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related