javascript - 将元素绑定(bind)到不同框架中的现有 AngularJS 范围

Question

我有一个页面 A，其中包含两个 iFrame B 和 C。B 和 C 都是可信的并且在我的控制之下。 B 和 C 各自使用 AngularJS。我想使用页面 B 上的内部元素的范围作为页面 C 上的元素的范围。

更具体地说，

页面A:

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

B页:

...
<div id="trunk-element" ng-controller="PageBController">
  {{pageBModel.text}}
</div>
...

C页:

...
<div id="grafted-element">
  {{pageBModel.text}}
</div>
...

如何让#grafted-element“承担#trunk-element的范围”？也就是说，我希望 #grafted-element 的行为就像包含在页面 B 上的 #trunk-element 中一样。我在页面 C 中引用了 #trunk-element 的范围。

我尝试过的一些东西:

覆盖#grafted-element 的“$scope”数据属性。这会被恢复。

在页面 C 上创建一个 Controller ，我将 $scope 的 $parent 和 __proto__ 属性替换为 #trunk-element 的范围。然后我将#grafted-element 包含在该 Controller 中。这可行，但当 pageBModel.text 更改时，渲染不会更新。

Answer 1

我最终通过更全面地劫持 Controller 的范围来解决这个问题。具体来说:

页面 C 的 JavaScript:

// 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);
});

以及页面 C 的 html:

...
<div ng-controller="ExternalCtrl">
  {{pageBModel.text}}
</div>
...

其中 wScope 是#trunk-element 的 Angular 范围。