针对特定范围将文本编译为有角度的html并将其呈现为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?

Answer 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]);

Answer 2

它像本文档一样工作。body.appendChild（$ compile（element）（currentScope）[0]）;

Answer 3

如果您不能使用jQuery，请改用angular.element将主体包装在angular的jqLit​​e中。

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