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

【问题标题】：Bind element to existing AngularJS scope in a different frame将元素绑定到不同框架中的现有 AngularJS 范围
【发布时间】：2013-11-17 01:26:59
【问题描述】：

我有一个页面 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 上创建一个控制器，我将 $scope 的 $parent 和 __proto__ 属性替换为 #trunk-element 的范围。然后我将#grafted-element 包含在该控制器中。这可行，但是当 pageBModel.text 更改时渲染不会更新。

【问题讨论】：

从 C 页面的控制器中，您是否尝试过类似 $scope.pageBText = angular.element(parent.iFrameBName.getElementById("trunk-element")).scope().text 的操作？那么也许你必须设置一个$watch，不确定。
对不起，我在 iFrame 之后停止阅读。不使用 iframe 就没有其他办法解决问题了吗？
可以设置手表，但是这样会导致很多重复。有 iframe 的原因是因为这实际上是在 firefox 扩展中。页面 A 不能以角度运行（它是 xul 页面）。页面 B 和 C 是同一个应用程序的两个部分，但在用户界面上是分开的。
我做对了吗？您尝试使用范围共享数据？如果是这样，请改用 Service 将其注入控制器并在控制器内部将值分配给范围。

标签： javascript jquery html angularjs iframe

【解决方案1】：

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

页面 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 的角度范围。

【讨论】：