I am trying to create a preview of a full fledged html document, meaning this html content is itself a complete html document with <html>, <head>, <body> tags.
If I would just load that html document into my existing html root, then all styles will be overridden by the ones defined in the newly included html doc. If I include this html document with an iframe over src (<ifram e src="path/to/doc.html">) then it works. However, this doc.html is a template where I need to replace certain parts which I have annotated with custom tags. I am doing this by executing the following code
$.get('template/template.html', function (template) {
String.prototype.format = function () {
var args = arguments;
this.unkeyed_index = 0;
return this.replace(/{(w*)}/g, function (match, key) {
if (key === '') {
key = this.unkeyed_index;
this.unkeyed_index++
}
if (key == +key) {
return args[key] !== 'undefined'
? args[key]
: match;
} else {
for (var i = 0; i < args.length; i++) {
if (typeof args[i] === 'object' && typeof args[i][key] !== 'undefined') {
return args[i][key];
}
}
return match;
}
}.bind(this));
};
var renderedHtml = template.format({hello: "hey there"});
});
So far this works fine. In the variable renderedHtml I have my complete html document and the placeholders are being replaced (in this case the placeholder hello is being replaced with "hey there".
No I have the following html snippet
<iframe id="test"></iframe>
and I tried the following code:
var elem = document.createElement('div');
elem.innerHTML = renderedHtml;
document.getElementById('test').appendChild(elem);
$compile(elem)($scope);
Unfortunately, nothing changes on the view. However, if I call appendChild(elem) on document.body then it works. Does anyone know what the problem could be?
P.S. I know that you should not do DOM manipulations in your angular controller and instead of $compile you should do it with a directive. However, if this way works then I am happy to try to refactor it to a directive :).
See Question&Answers more detail:os
