Angularjs:在iframe中调用其他范围

Question

Angularjs:在iframe中调用其他范围

Stu*_*rog 25 javascript angularjs angularjs-scope

在我的测试中,给出了2个文档,A和B.在A文档中,有一个iframe,iframe源是B文档.我的问题是如何修改B文件的某些变量范围？

这是我的代码:一份文件

<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>

Run Code Online (Sandbox Code Playgroud)

我的B档案:

<!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>

Run Code Online (Sandbox Code Playgroud)

注意:实际上有一些方法可以做到这一点,我认为它就像一个hack而不是正确的方法来完成它:那就是在b Document中创建一个按钮,然后用angularjs ng-click绑定.之后,文档jquery"触发"单击按钮.

Answer 1

Uri*_*igo 48

要在两个方向上访问和通信(父级到iFrame,iFrame到父级),如果它们都在同一个域中,可以访问角度范围,请尝试执行以下步骤:

*您不需要父级引用angularJS库...

从父母调用子iFrame

1.从父级获取子iFrame元素(链接到答案):

的document.getElementById( "myIframe").contentWindow

2.访问元素的范围:

的document.getElementById( "myIframe").contentWindow.angular.element( "#someDiv").范围()

3.调用范围的功能或属性:

的document.getElementById( "myIframe")contentWindow.angular.element( "#someDiv")范围()someAngularFunction(数据)...;

4.Call $ scope.$在运行函数的逻辑/更新属性后应用(链接到Mishko的答案):

$ scope.$ apply(function(){});

另一个解决方案是在iFrame之间共享范围,但是你需要双方都有角度:( 链接到答案和示例)

从子iFrame调用父级

调用父函数:

parent.someChildsFunction();

如果有必要,还将更新如何跨域进行更新..

我想补充一点,您可以从iframe中获取父作用域,如下所示:`var $ scope = parent.angular.element('#element-id').scope();` (6认同)

Answer 2

Yid*_*ing 14

您应该能够从iFrame获取父作用域:

var parentScope = $window.parent.angular.element($window.frameElement).scope();

Run Code Online (Sandbox Code Playgroud)

然后你可以调用父方法或更改父变量(但记得调用parentScope.$apply同步更改)

测试Angular 1.3.4

归档时间：	12 年前
查看次数：	38292 次
最近记录：	6 年，10 月前