Let's say I have an XML document that looks like
<something>
<something-else />
</something>
I'd like to insert this directly into an HTML document. There are certain rules as to what <something> elements look like (for instance, they should be divs of width 100px with a black background and should expand upon clicking). Angular directives seem like a good way to deal with this - just make a something directive. The only problem is that the XML is loaded from a server, so I can't make the directive beforehand. I've tried just inserting the directive creation into the controller, but it (expectedly) doesn't work with this simple example:
$scope.makeTheDirective = function () {
module.directive('dir', function () {
return {
replace: true,
template: '<div style="background:black;width:100px;height:100px;"></div>',
link: function () {
console.log('making the directive');
}
}
});
$(document.body).append($compile('<dir>This is a test</dir>'));
}
with appropriate calling in the document. How can I make Angular recognize directives created after the app is loaded so that I can add $compiled HTML to the DOM?
