Iframes and the digest cycle

174 views
Skip to first unread message

gwk

unread,
Feb 6, 2014, 8:37:18 AM2/6/14
to ang...@googlegroups.com
Hi,

I have an application I'm trying to angularize. In this app part of the interface is in an iframe. This is so that the stylesheet for the content in the iframe is isolated from the styles of the rest of the interface. I'm trying to bind the data from the parent document in the iframe however I'm running into some problems with this. Since the content in the iframe is not part of the parent document even adding the ng-app directive to the <html>-tag won't affect content in the iframe (it won't be bootstrapped by angular). If I manually bootstrap the content of the iframe (window.parent.angular.bootstrap(document.documentElement, ['myApp'])) will create a separate application which means I can't just use services to share data. I've sort of hacked around this issue by having the service factory check for a cached value
 on $window and $window.parent and return that if it exists. That leaves me with one issue: the digest cycle. Because I now have essentially two angular apps sharing the same variable for "communication" making a change in one won't trigger the digest cycle in the other, see my plnkr.

I'm hoping there is a better, more proper way to solve this, but if there isn't, what would be the best strategy to trigger the digest cycle from the other app (without each digest cycle continually triggering eachother)


gwk

unread,
Feb 7, 2014, 5:10:24 AM2/7/14
to ang...@googlegroups.com
I've been able to solve my own problem and updated my plunk with my solution (if anyone else runs into a similar issue).

The iframe directive I've added automatically binds the contents of the iframe to the current scope as long as the iframe is hosted from the same domain.
Reply all
Reply to author
Forward
0 new messages