Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Here is a directive in AngularJS to embed a Gist. This technique uses an iframe to add the gist because AngularJS doesn't handle script tags inside a template. And even if it does (with jQuery), it won't work as expected because Gist uses document.write. The iframe solves both issues.
<!-- In your template -->
<div data-gist="{{gistId}}"></div>
angular.module('T.directives', []).
directive('gist', function() {
return function(scope, elm, attrs) {
var gistId = scope.gistId;
var iframe = document.createElement('iframe');
iframe.setAttribute('width', '100%');
iframe.setAttribute('frameborder', '0'); = "gist-" + gistId;
var iframeHtml = '<html><head><base target="_parent"><style>table{font-size:12px;}</style></head><body onload="parent.document.getElementById(\'' + + '\').style.height=document.body.scrollHeight + \'px\'"><scr' + 'ipt type="text/javascript" src="' + gistId + '.js"></sc'+'ript></body></html>';
var doc = iframe.document;
if (iframe.contentDocument) doc = iframe.contentDocument;
else if (iframe.contentWindow) doc = iframe.contentWindow.document;;

For raw texts you have to change var gistId = scope.gistId; by var gistId = attrs.gist;
Also remember to fill the username like <div data-gist="pushlink/1a47d8b9710cd4e9e604"></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment