Appending a tag with interpolation using JavaScript in Angular

Question

I've got a testing routine that creates a div tag, appends it to the body, and then sets its innerHTML property to:

<p>{{testVar}}</p>

All with Javascript, like so:

var created = document.createElement('h1');

var elem = document.body.appendChild(created);
elem.innerHTML='<p>{{testVar}}</p>';

It then shows up on the page, double curly brackets and all. What is the correct way to dynamically add this single element to my page so that the interpolation is recognized?

That's a XY problem. Simply don't do that.

Blackhole
– Blackhole

2014-09-09 21:43:21 +00:00
Commented Sep 9, 2014 at 21:43 — Blackhole
– Blackhole, Commented Sep 9, 2014 at 21:43

tymeJV · Accepted Answer · 2014-09-09 20:05:49Z

2

You have to compile the HTML against the current scope, you can use a directive:

app.directive("myDynamicHtml", ["$compile", function($compile) {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var compiledHtml = $compile("<h1><p>{{testVar}}</p></h1>")(scope);
            document.body.appendChild(compiledHtml);
        }
    }
}]);

answered Sep 9, 2014 at 20:05

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

3 Comments

dfsq Over a year ago

It should be compiledHtml[0].

papiro Over a year ago

If I inject $compile into my Service service, can I $compile it there but against the $rootScope?

tymeJV Over a year ago

Yep, inject it where needed.

Collectives™ on Stack Overflow

Appending a tag with interpolation using JavaScript in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related