Angularjs：调用其他范围这在IFRAME [英] Angularjs: call other scope which in iframe
问题描述
在我的测试中，由于2号文件，A和B在文档中，有一个iframe，在iframe源为B的文件。我的问题是如何修改B原稿某个变量的范围是什么？
下面是我的code：文档
＆LT; HTML LANG =ENNG-应用=＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;谷歌手机图库＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.10.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / angular1.0.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
VAR克;
功能测试（$范围，$ HTTP，$编译）
{
$ scope.tryget =功能（）{ VAR iframeContentWindow = $（＃IFRAME）[0] .contentWindow;
VAR iframeDOM = $（＃IFRAME）[0] .contentWindow.document;
VAR的目标= $（iframeDOM）.find（＃测试2）;
VAR iframeAngular = iframeContentWindow.angular;
变种iframeScope = iframeAngular.element（＃TEST2）范围（）;
iframeScope.parentcall（）;
。iframeContentWindow.angular.element（＃测试2），范围（）tempvalue = 66;
iframeScope.tempvalue = 66;
iframeContentWindow.tt = 22;
iframeScope.parentcall（）;
的console.log（iframeScope.tempvalue）;
的console.log（angular.element（＃续）范围（））;
}
} ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT; DIV NG控制器=测试＆GT;
＆LT; DIV ID =续＆GT;
＆LT;按钮NG点击=tryget（）＆GT;尽量＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; IFRAME SRC =test2.htmlID =iframe中＆GT;＆LT; / IFRAME＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
我的B原稿：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;谷歌手机图库＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.10.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / angular1.0.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
变种TT = 11;
功能测试2（$范围，$ HTTP，$编译）
{
的console.log（test2的控制器初始化）;
$ scope.tempvalue = 0;
$ scope.parentcall =功能（）
{
$ scope.tempvalue = 99;
的console.log（$ scope.tempvalue）;
的console.log（TT）;
}
} ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT; DIV NG控制器=test2的ID =test2的＆GT;
＆LT; DIV ID =续＆GT;
＆LT;按钮NG点击=parentcall（）＆GT;拿到剧本＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
{{tempvalue}}
＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
注：其实有一些方法来做到这一点，这是我觉得它像一个黑客，而不是正确的方式来完成它：
这是创建b稿件按钮，然后用angularjs NG-单击绑定。该文档jQuery的触发后，单击按钮。
要访问并在两个方向上进行通信（父母的iFrame，iFrame的母公司）的情况下，它们都在同一个域中，可进入角范围，请尝试以下这些步骤：
*您不需要父母有参考angularJS库...
从调用父到子的iFrame
1.Get从父子iframe元素（<一个href=\"http://stackoverflow.com/questions/251420/invoking-javascript-$c$c-in-an-iframe-from-the-parent-page\">link回答）：
的document.getElementById（myIframe）。contentWindow
2.Access元素的范围：
的document.getElementById（myIframe）。contentWindow.angular.element（＃someDiv）。范围（）
3.Call范围的函数或属性：
document.getElementById(\"myIframe\").contentWindow.angular.element(\"#someDiv\").scope().someAngularFunction(data);
4.Call $范围。运行功能的逻辑/更新属性（<一后申请$ href=\"http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-$c$c/10508731#10508731\">link到Mishko的回答）：
$ $范围应用（函数（）{}）;
- 另一种解决方案是共享的iFrame中之间的范围，但你在双方需要角：（<一href=\"http://stackoverflow.com/questions/19125910/is-it-possible-to-update-angularjs-ex$p$pssions-inside-of-an-iframe/19126316#19126316\">link回答和实例）
调用子从父的iFrame
- 调用父函数：
parent.someChildsFunction（）;
也将更新关于如何做到这一点跨域如果有必要。
In my test, given 2 document, A and B. In A document, there is an iframe, the iframe source is B document. My question is how to modify B document certain scope of variable?
Here is my code: A document
<html lang="en" ng-app=""> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <script type='text/javascript' src="js/jquery-1.10.2.js"></script> <script type='text/javascript' src="js/angular1.0.2.min.js"></script> <script> var g ; function test($scope,$http,$compile) { $scope.tryget = function(){ var iframeContentWindow = $("#iframe")[0].contentWindow; var iframeDOM = $("#iframe")[0].contentWindow.document; var target = $(iframeDOM).find("#test2"); var iframeAngular = iframeContentWindow.angular; var iframeScope = iframeAngular.element("#test2").scope(); iframeScope.parentcall(); iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ; iframeScope.tempvalue = 66; iframeContentWindow.tt = 22; iframeScope.parentcall(); console.log(iframeScope.tempvalue); console.log(angular.element("#cont").scope()); } } </script> </head> <body> <div ng-controller="test"> <div id="cont" > <button ng-click="tryget()">try</button> </div> </div> <iframe src="test2.html" id="iframe"></iframe> </body> </html>My B document:
<!doctype html> <html lang="en" ng-app=""> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <script type='text/javascript' src="js/jquery-1.10.2.js"></script> <script type='text/javascript' src="js/angular1.0.2.min.js"></script> <script> var tt =11; function test2($scope,$http,$compile) { console.log("test2 controller initialize"); $scope.tempvalue=0; $scope.parentcall = function() { $scope.tempvalue = 99 ; console.log($scope.tempvalue); console.log(tt); } } </script> </head> <body> <div ng-controller="test2" id="test2"> <div id="cont" > <button ng-click="parentcall()">get script</button> </div> {{tempvalue}} </div> </body> </html>Note: Actually there is some way to do it, which i feel it like a hack instead of proper way to get it done: that is create a button in b Document, and then bind with angularjs ng-click. After that A document jquery "trigger" click on button.
解决方案To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they are both in the same domain, with access to the angular scope, try following those steps:
*You don’t need the parent to have reference to angularJS library…
Calling to child iFrame from parent
1.Get child iFrame element from the parent (link to answer):
document.getElementById("myIframe").contentWindow
2.Access the scope of the element:
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope()
3.Call the scope’s function or property:
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope().someAngularFunction(data);
4.Call $scope.$apply after running the logic of the function/updating the property (link to Mishko’s answer):
$scope.$apply(function () { });
- Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example)
Calling parent from child iFrame
- Calling the parent function:
parent.someChildsFunction();
Will update also on how to do it cross domain if it is necessary..
这篇关于Angularjs：调用其他范围这在IFRAME的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
