it-roy-ru.com

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

В моем тесте, учитывая 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>

Мой документ 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 «сработает» нажатием на кнопку.

24
Stupidfrog

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

* Вам не нужно, чтобы родитель имел ссылку на библиотеку angularJS ...

Вызов дочернего iFrame от parent

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, но тогда вам нужно угловое с обеих сторон: ( ссылка на ответ и пример )

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

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

parent.someChildsFunction ();

Также будет обновлена ​​информация о том, как это сделать, если это необходимо.

46
Urigo

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

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

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

Проверено на Angular 1.3.4

13
Yiding

На мой взгляд, лучший способ общения с 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);

ВНИМАНИЕ: Если вы используете этот контроллер несколько раз, обязательно используйте дополнительный идентификатор, чтобы определить, какую область вы хотите.

3
Benoit Tremblay

Этот довольно простой и работает для меня:

в коде контроллера страницы iframe:

$window.parent.window.updatedata($scope.data);

в коде контроллера родительской страницы:

window.updatedata = function (data) {
 $scope.$apply(function () {
     $scope.data = data
   }
 }
0
Erjan Kelder