Compiling text into angular html for a specific scope and render it into DOM

Question

I have some specific requirement. I have html pages for a functionality (like popup). I want that html to be rendered while changing my state. In this, my state specific HTML is different. Html which I want to render is should get render as a immediate child of body and it contains Angular tag like ng-click etc.

I want to load it by calling a function(manually).

This worked for me :

$http.get("/myTemplate.html").then(function(response) {
    var raw_html = response.data;

    $('body').append($compile(raw_html)(myScope));
});

But as per security concern, I can't use $('body').append (jquery apppend)

So I tried it from pure javascript :

$http.get("/myTemplate.html").then(function(response) {
    var raw_html = response.data;
    var element = document.createElement("div"); 
    element.className = 'myClass';
    element.innerHTML = raw_html;
    document.body.appendChild($compile(element)(currentScope));
});

But what $compile return is not compatible with appendChild.

Can directive help me in this case?

Kobi Cohen · Accepted Answer · 2016-05-03 09:35:21Z

1

Why don't you use ng-include.

You can use it in 3 different ways:

<div ng-include="'/myTemplate.html'"></div>
<div ng-include src='/myTemplate.html'"></div>
<ng-include src="'/myTemplate.html'">

If you must go the other way, you can refer to the dom object by element[0]

Edited

document.body.appendChild($compile(element)(currentScope)[0]);

edited May 3, 2016 at 9:35

answered May 3, 2016 at 9:18

Kobi Cohen

6784 silver badges9 bronze badges

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

2 Comments

parth.hirpara Over a year ago

Because, I want that template at immediate child of body, not under ng-view to override z-index of header and all.

parth.hirpara Over a year ago

No it is not working because appendChild not accepting $compile(element[0])(currentScope) as argument but $('body').append do.

parth.hirpara · Accepted Answer · 2016-05-03 09:33:49Z

0

It worked like this document.body.appendChild($compile(element)(currentScope)[0]);

answered May 3, 2016 at 9:33

parth.hirpara

5424 silver badges19 bronze badges

Comments

noppa · Accepted Answer · 2016-05-03 09:46:06Z

0

If you can't use jQuery, use angular.element to wrap the body in angular's jqLite instead.

angular.element(document.body).append($compile(raw_html)(myScope));

answered May 3, 2016 at 9:46

noppa

4,08623 silver badges23 bronze badges

Collectives™ on Stack Overflow

Compiling text into angular html for a specific scope and render it into DOM

3 Answers 3

Edited

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edited

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related