Angularjs: вызов другой области действия, которая в iframe

В моем тесте, учитывая 2 документа, A и B. В документе есть 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>

Мой документ 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>

Примечание. На самом деле есть способ сделать это, и я чувствую, что это как взломать вместо правильного способа сделать это: это создать кнопку в документе b, а затем привязать с помощью angularjs ng-click. После этого документ jquery "триггер" нажимает кнопку.

Ответы

Ответ 1

Для доступа и обмена данными в двух направлениях (родительский для iFrame, iFrame для родителя), если они находятся в одном домене с доступом к области angular, выполните следующие шаги:

* Вам не нужен родитель, чтобы иметь ссылку на библиотеку 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. $apply после запуска логики функции/обновления свойства (ссылка на ответ Мишко):

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

  • Другим решением является разделение области между iFrames, но тогда вам нужно angular с обеих сторон: (ссылка на ответ и пример)

Вызов родителя из дочернего iFrame

  • Вызов родительской функции:

parent.someChildsFunction();

Будет также обновляться и о том, как это сделать, перекрестный домен, если это необходимо.

Ответ 2

Вы можете получить родительскую область из iFrame:

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

Затем вы можете вызвать родительский метод или изменить родительскую переменную (но не забудьте вызвать parentScope.$apply, чтобы синхронизировать изменения)

Протестировано на Angular 1.3.4

Ответ 3

Лучший способ, с которым я хочу общаться с iframe, - использовать window.top. Если вы хотите, чтобы ваш iframe получил вашу родительскую область, вы можете установить window.scopeToShare = $scope; в свой контроллер и стать доступным для страницы iframe в window.top.scopeToShare.

Если вы хотите, чтобы ваш родитель получил область iframe, вы можете использовать

window.receiveScope = function(scope) {
  scope.$on('event', function() {
    /* Treat the event */
  }
};

и внутри вызова контроллера iframe window.top.giveRootScope($rootScope);

ПРЕДУПРЕЖДЕНИЕ. Если вы используете этот контроллер несколько раз, убедитесь, что используете дополнительный идентификатор, чтобы определить, какую область вы хотите.