Javascript 将元素绑定到不同框架中的现有AngularJS范围

我有一个页面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>
...

。。。
{{pageBModel.text}
...

C页：

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

。。。
{{pageBModel.text}
...

如何让#grafted元素“占据#trunk元素的范围”？也就是说，我希望#grafted元素的行为就像它包含在B页的#trunk元素中一样。我在C页中引用了#trunk元素的作用域

我试过一些东西：

覆盖#嫁接元素的“$scope”数据属性。这将被还原

---

在C页上创建一个控制器，我将其$scope的$parent和_uproto_uuu属性替换为#trunk元素的scope。然后，我将嫁接元素封装在该控制器中。这是可行的，但当pageBModel.text发生更改时，渲染不会更新。

我最终解决了这个问题，更全面地劫持了控制器的作用域。具体而言：

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

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

以及C页的html：

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

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

。。。
{{pageBModel.text}
...

---

其中wScope是#trunk元素的角度范围。

我最终通过更全面地劫持控制器的范围来解决这个问题。具体而言：

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

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

以及C页的html：

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

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

。。。
{{pageBModel.text}
...

---

其中wScope是#trunk元素的角度范围。

在C页的控制器中，您是否尝试过类似

$scope.pageBText=angular.element（parent.iFrameBName.getElementById（“trunk元素”）.scope（）.text的方法？那么你可能需要设置一个
$watch
，不确定。对不起，我在iFrames之后停止了阅读。如果不使用iFrame，就没有其他解决问题的方法了吗？可以设置手表，但这会导致大量重复。之所以有iFrame，是因为它实际上在firefox扩展中。页面A无法运行angular（它是xul页面）。B页和C页是同一个应用程序的两部分，但在ui方面是分开的。我理解对了吗？您是否尝试使用作用域共享数据？如果是这样，请使用注入控制器的服务，并在控制器内部将值分配给作用域。在C页的控制器中，您是否尝试过类似于
$scope.pageBText=angular.element（parent.iFrameBName.getElementById（“trunk element”）.scope（）.text的操作？那么你可能需要设置一个
$watch
，不确定。对不起，我在iFrames之后停止了阅读。如果不使用iFrame，就没有其他解决问题的方法了吗？可以设置手表，但这会导致大量重复。之所以有iFrame，是因为它实际上在firefox扩展中。页面A无法运行angular（它是xul页面）。B页和C页是同一个应用程序的两部分，但在ui方面是分开的。我理解对了吗？您是否尝试使用作用域共享数据？如果是这样，请使用一个服务，将其注入控制器，并在控制器内部将值分配给作用域。