For this website I have a BlogPost directive that parses an escaped HTML string from MongoDB and dynamically adds it to the DOM but I had an issue arise when I wanted to embed a Github gist with Angular gist.

The Angular Gist directive creates a new iFrame DOM element, appends it to the element marked by the directive and finally writes the necessary html to the inner document of the iframe summarized below:

var doc = iframe.document;
if (iframe.contentDocument) doc = iframe.contentDocument;
else if (iframe.contentWindow) doc = iframe.contentWindow.document;

doc.open();
doc.writeln(iframeHtml);
doc.close();

The issue I kept having was, while the directive worked fine in static HTML, the "doc" variable above was always null in my blogpost directive. A couple of Google searches later, I found the answer to my troubles on StackOverflow. It turns out that unless the iframe is already part of DOM, it can't have an inner document object. This meant that my blogpost directive had to first add the HTML of the blog post to the DOM first, and then go look for the elements marked up with the Angular gist directive and $compile it. So, that's exactly what I did.

var content \= $scope.**snippet  
** ? getPostSnippet($scope.**blogpost**)  
 : getBlogPostBody($scope.**blogpost**);  
  
content \= **JSON**.parse('"' \+ content \+ '"');  
content \= $rootScope.**TunjiWeb**.insertLineBreaks(content);  
  
// Must append content to DOM first, before trying to compile Gist directive.  
// This is because to manipulate an iframe's contentdocument, the element the iframe is  
// being appended to must be part of the DOM, else the contentDocument will be null.  
$elem.append('<div>' \+ content \+ '</div>');  
  
// Find all gist tags  
var gistTags \= $elem.find('gist');  
  
for(var i \= 0; i < gistTags.**length**; i++) {  
 $compile(gistTags\[i\])($scope);  
}

 I can now embed Github gists on this blog, and can say I've almost completely weaned myself off WordPress, I just need a fancy stats graph for each post.