Bind element to existing AngularJS scope in a different frame


I have a page A, which contains two iFrames B and C. Both B and C are trusted and under my control. B and C each use AngularJS. I'd like to use the scope of an inner element on page B as the scope for an element on page C.

More concretely,

Page A:

<iframe src="Page B"/>
<iframe src="Page C"/>

Page B:

<div id="trunk-element" ng-controller="PageBController">

Page C:

<div id="grafted-element">

How do i get #grafted-element to "take on the scope" of #trunk-element? That is, I'd like #grafted-element to act exactly as if it was included inside #trunk-element on page B. I have a reference to #trunk-element's scope in page C.

Some stuff I've tried:

Overwriting the '$scope' data attribute of #grafted-element. This gets reverted.

Creating a controller on page C for which I replace the $parent and __proto__ properties of $scope to #trunk-element's scope. Then I enclose #grafted-element in that controller. This works, but the rendering does not update when pageBModel.text changes.


I ended up solving this by hijacking the scope of the controller more fully. Specifically:

Javascript for page C:

// copypasta from angular's $new
var adoptScope = function(parent, child) {
  child.$$listeners = {};
  child.$parent = parent;
  child.__proto__ = parent;
  child.$$watchers = null;
  child.$$nextSibling = null;
  child.$$childHead = null;
  child.$$childTail = null;
  child.$$prevSibling = parent.$$childTail;
  if (parent.$$childHead) {
    parent.$$childTail.$$nextSibling = child;
    parent.$$childTail = child;
  } else {
    parent.$$childHead = parent.$$childTail = child;
  child.$root = parent.$root;
  child.$$asyncQueue = parent.$$asyncQueue;
  child.$$postDigestQueue = parent.$$postDigestQueue;

myApp.controller('ExternalCtrl', function($scope) {
  adoptScope(wScope, $scope);

And the html for page C:


This video can help you solving your question :)
By: admin