1

我有一个页面 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 更改时渲染不会更新。

4

1 回答 1

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

于 2013-11-06T01:33:55.800 回答