我有一个页面 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 更改时,渲染不会更新。
最佳答案
我最终通过更全面地劫持 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 范围。
关于javascript - 将元素绑定(bind)到不同框架中的现有 AngularJS 范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19801414/