Getting an AngularJS directive to work in an iframe

Question

I am trying to get an angular directive to function inside of an iframe. The iframe is not from an external domain and is need so styles of the app that contains the iframe aren't applied to the content in the iframe.

Here is a simple Plunker of what I am needing to do.

As you can see the element with the my-draggable directive functions outside of the iframe but not within.

As far as I can tell these are recognized as having the same origin, hence the ability of the parent page to inject content into the iframe. I have also tried setting document.domain for both the iframe and the parent page. Same results.

Is this a same origin policy issue or is it related to Angular scope?

Answer 1

Angular won't descend into the iframe during its compile phase, since the iframe is a separate DOM. In theory you could pass ifrm.innerWindow.document.body to $compile , then link it to a fresh scope. But at that point your iframe has become a very clunky ngInclude , so why not just use that?