5

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?

andypants
  • 73
  • 2
  • Are you really wanting Angular to continue scope inheritance between the iframe container and the iframe content? You will need separate applications and to manage communication between boths. See http://stackoverflow.com/questions/19125910/is-it-possible-to-update-angularjs-expressions-inside-of-an-iframe – atondelier Feb 13 '14 at 23:20
  • Yes, I want to continue and share scope between the app and the iframe. The idea is that a preview of what is made in the app is loaded into the iframe. The user can then manipulate the preview by dragging objects and these changes are communicated back to the app. – andypants Feb 13 '14 at 23:28
  • @andypants were you able to find a solution to this? I'm looking to do something similar... – jetcom Oct 02 '14 at 22:56

1 Answers1

0

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?

Chris Bouchard
  • 806
  • 7
  • 12